Vue day11

Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态（数据）管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

程序中的公共数据一定是可以预测的，可以追踪的

Vuex和vue-rouer一样是vue的插件
使用插件
Vue.use（插件） //往Vue构造函数增加一些属性和方法

下载
cnpm i vuex -S

如果你cli选择了vuex，会为你自动配置好vuex，否则

// src新建store
// store
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //使用该插件

//导出
export default new Vuex.Store({
state: { //state存放公共数据的地方
num1: 10
},
mutations: {
addnum (state, value) { //存放公共数据改变的方法,其方法可以有两个参数，第一个代表state，第二个代表调用时传的值，想传多个值可以定义成数组或者对象
state.num1 += value
}
},

在组件中获取数据
this.$store.state.num1
在组件中使用mutations的方法
methods: {
    jiajia () {
      this.$store.commit('addnum'，value)          //直接使用$store里面的方法，如果其在定义的时候包含要传入的值，可以再使用时候传入值
    }
  }

actios
数据是可以被追踪的，所以其来源也是可以被追踪的，所以其定义了actions属性来存放通过接口请求的数据，其不能直接修改state，而是提交某个mutations来提交数据，
使用场景：
一个公共数据，去数据来源需要请求一个请求接口（发生ajax）
应该在请求在atcion中请求，得到数据后，将数据通过mutations赋值给一个state

{
  state: {
    num: 10
  },
  mutations: {
    setNum (state, n) {
      state.num = n
    }
  },
  actions: {
    getNum (context) { // context是 store这个对象
      fetchNum().then(res => { // 封装的ajax请求函数
        if (res.data.code === 200) {
          context.commit('setNum', res.data.data)
        }
      })  
    }
  }
}

当大型项目时，可以采取模块化这样的方式使结构更加分明

在action里可以这样写

 getnum ({ commit }) {                            //解构赋值
    setTimeout(
      () => {
        commit('addnum', 20)              
      }, 1000
    )
  }

vuex助手函数
mapState（['num']）