vuex初理解-下

三、getters

有时候我们需要对state中的数据做一些处理，方便使用。如果多个组件中都需要数组的长度，那就可以在getters中先计算出来，在组件中直接使用。

  state: {
    todos:['a','b','c','d','e']
  },
  getters:{
    getTodoLength(state){
      return state.todos.length
    },
    getTodoScore(state,getters){
      if(getters.getTodoLength>3){
        return '任务已完成';
      }
    }
  },

console.log(this.$store.getters.getTodoLength);//3
console.log(this.$store.getters.getTodoScore);//任务已完成

以上：getters接收两个参数（state,getters）

通过方法访问

让getter返回一个函数，实现给getter传递自定义参数

  getTodoScore(state,getters){
      return function(i){
        return state.todos[i];
      }
    }

console.log(this.$store.getters.getTodoScore(1));//b

mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果需要另取名字,使用对象形式

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

四、mutation

1.提交 mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

 const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

this.$store.commit('increment')

2.提交载荷（payload）

向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

this.$store.commit('increment', 10)

载荷可以是一个对象

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

this.$store.commit('increment', {
  amount: 10
})

3.对象风格的提交方式：

this.$store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

4.mutation注意事项-遵循响应规则

1.最好提前在store中初始化所有属性
2.如果需要给对象添加新属性

• 使用Vue.set方法

Vue.set(obj,'newProp',123);

• 用新对象替换老对象

state.obj = { ...state.obj, newProp: 123 }

5.使用常量替代 Mutation 事件类型

6.Mutation 必须是同步函数

让状态改变在devtools中可追踪

7.mapMutations

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

五、actions

1.提交mutation

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

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

2.context对象
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象（并不是实例本身）

• context.commit
• context.state
• context.getters

context中有很多方法和属性，可以通过参数解构来设置常用的方法和属性

actions: {
  increment ({ commit ,getters,state}) {
    commit('increment')
  }
}

3.分发action

this.$store.dispatch('increment')

• 执行异步操作

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

• 载荷

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

待续