Vuex 基础

Vuex

作用：为Vue.js开发的状态管理工具，集中式存储管理应用的所有组件的状态，实现不同组件之间数据传递。npm i vuex --save

store

store中的数据可以共享给其他任意位置，在调用时使用store.state或this.$store.state访问store中的数据。单个数据可以使用computed返回某个状态，多个数据需引入mapState辅助函数生成计算属性

//store.js
export default new Vuex.store({
	state:{
	  count:0,
	  msg:'hello'
	},
	getter:{
	  reverseMsg(){ return state.msg.splice('').reverse().join('') }
	}
})
//调用时
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  computed:{
    mapState({
      count: state => store.state
    })
  }
}

当映射的计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组。

computed:{
  mapState(['count'])//// 映射 this.count 为 store.state.count
}

mapState 函数返回的是一个对象，使用对象展开运算符将多个对象合并为一个，将最终对象传给 computed 属性

computed:{
  ...mapstate(['count','msg'])
  ...mapState({num:'count',message:'msg'})//修改映射计算属性的名字，count生成的计算属性名称为num
}

Getter

可以从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。与state相同也可使用重命名

computed:{
 ...mapGetters(['reverseMsg'])
}

Mutation

唯一可以修改Vuex中store状态的方法,不能处理异步操作，按照调用顺序或者commit提交的顺序触发事件。调用mutition方法需要使用store.commit 方法。利用actions属性可以实现异步处理

// Vuex文件
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      // 变更状态
      state.count+=payload
    }
  }
})
// 调用时
store.commit('increment',10)
//或在method中...mapMutation(['increment')]后increment(3)

Mutation 操作数据之前必须保证store中存在初始化好的属性，如果需要给store中添加新属性用Vue.set(obj, 'newProp', 123)设置

Action

通过action 提交mutation，而不是直接修改store中的数据，action中的需要传入context，内部包含commit,dispatch,state等方法，可将commit等方法解构出来使用

 actions: {
    increment (context) {
      context.commit('increment')
    }
  }
  store.dispatch('increment')//触发action
  store.dispatch({
	type:'incrementAsync',
	amount:10
	})  //通过对象方式分发

context 与 store功能完全相同，所以调用context.commit方法提交mutation，通过store.dispatch触发action

Moudle

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
调用模块中的state时需要加上模块名称，模块中的Mutation和Action与store中的Mutation和Action一样都在_Mutation和_Actions中无需添加模块名称，store和模块中的Mutation和Action重名则都会被调用。可开启模块中的命名空间。

// 定义的模块内部导出时添加namespace属性。
export default {
  namespace: true,
  state,
  getters,
  mutations,
  actions
}
//调用时在mapMutation和mapState中书写定义命名空间
...mapState('引入模块的名称',['模块的数据'])
methods:{
  ...mapMutation('引入的模块名称',['模块中的方法'])
  this.模块中的方法(['传入的参数'])
}

严格模式

vuex提供了严格模式使用strict: true 限制对store中的数据进行脏操作，会报错数据发生修改。