Vuex的学习（18）

使用Vuex优化前面的Todos

基本要点与基本流程

//TodoHeader
this.$store.dispatch('addTodo', todo)


//actions
addTodo ({commit}, todo) {
    // 提交一个comutation请求
    commit(ADD_TODO, {todo}) // 传递给mutation的是一个包含数据的对象
  },


//mutations
[ADD_TODO] (state, {todo}) {  // 方法名不是ADD_TODO, 而是add_todo
    state.todos.unshift(todo)
  },

一旦要读vuex管理的状态或者计算属性都用computed

一般的串变成变量用中括号：[ADD_TODO]

强调多组件状态管理，一个组件用的就不用vuex了

对于get set 就要单独写,注意在getters中不要用this，传一个getters去获取当前模块的方法

<input type="checkbox" v-model="checkAll"/>


checkAll: {
        get () { // 决定是否勾选
          return this.$store.getters.isAllSelect
        },

        set (value) {// 点击了全选checkbox  value是当前checkbox的选中状态(true/false)
          // this.selectAll(value)
          this.$store.dispatch('selectAll', value)
        }
      },

//getters
/*
包含n个基于state的getter计算属性方法的对象模块
 */
export default {

  // 总数量
  totalSize (state) {
    return state.todos.length
  },
  // 完成的数量
  completeSize (state) {
    return state.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)
  },

  // 判断是否需要全选
  isAllSelect (state, getters) {
    return getters.completeSize===getters.totalSize && getters.completeSize>0
  }
}

代替模板

new Vue({
  el: '#app',
  render:h => h(App),
  store 
})
// 相当于
// new Vue({
//   el: '#app',
//   render:function (createElement) {
//     return createElement(App) //<APP/>
//	根据组件创建了一个标签  createElement就可以表达直接的含义，
//   },
//   store
// })

来源：CSDN

作者：写bug的小气球

链接：https://blog.csdn.net/weixin_46013619/article/details/104093922