vue复习（二）--vuex

vue复习（二）–vuex

vuex包含5个模块：

• state：存放数据的位置
• mutations：变更状态
• getters：动态变更数据
• actions：actions从动作层调用mutations去更改状态（可异步）
• modules：拆分仓库（模块化）

详细说明：

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations

this.$store.commit('mutation函数名'，发送到mutation中的数据)

mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action

this.$store.dispatch('action中的函数名'，发送到action中的数据)

actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

mutation和action的区别

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

• action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作
• action改变状态，最后是通过提交mutation