Vuex-Actions(替换Mutation的异步操作)-Modules模块-对象解构

actions引子

修改info的name

<h2>info：{{$store.state.info}}</h2>
 <button @click="updateInfo">修改info的name</button>

    updateInfo(){
     this.$store.commit('updateInfo')
   }

mutations

    updateInfo(state){
      //请求服务器更改
      setTimeout(()=>{
        //假设服务器的数据已经修改
        state.info.name = 'kcl'
      },1000)
    },

难道不是devtools的问题吗？

• 通常情况下，Vuex要求我们Mutation中的方法必须是同步方法
• 主要是因为我们使用devtools时，devtools可以帮助我们捕捉Mutation快照
• 但是如果是异步操作，那么devtools将不能很好的追踪什么时候会被完成

那该怎么办呢？
使用Action对mutation进行替换
Action类似于Mutation，但是是用拉力代替Mutation的异步操作的

这样子更改，devtools中的操作就同步了
官方也建议这样做

dispatch传递参数

 this.$store.dispatch('aUpdateInfo','我是传递信息')

  actions: {
   //context: 上下文 -> 理解为store对象
   aUpdateInfo(context,playload){
     setTimeout(()=>{
       context.commit('updateInfo') //继续传递
       console.log(playload);
     },1000)
   },
 },

这样做不优雅，怎么做才优雅呢？

  actions: {
    //context: 上下文 -> 理解为store对象
    aUpdateInfo(context,playload){
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          context.commit('updateInfo')
          console.log(playload) //传递参数
          resolve('resolve1111')
        },1000)
      })
    }
  },

setTimeout()异步操作要在actions里面处理，setTimeout处理时用Promise套住处理更加清晰一些，而且可以回调resolve,返回一个函数
dispatch可以回调

    updateInfo(){
      // this.$store.commit('updateInfo')
      this.$store.dispatch('aUpdateInfo','我是传递信息').then(res=>{
        //回调
        console.log(res);
      })

Modules

Vuex允许我们将store分割成模块(module),而每个模块拥有自己的state、mutations、actions、getters等

如果模块内有mutation，那么该怎么提交？
和原来提交的方式一致，mutation的函数名不要定义相同啊！this.$store.commit('xxx')
模块内的getter，外面该怎么用呢？
也是普通的用法，直接用就行了，$store.getters.xxx
而且getters内的方法可以继续套娃

  getters: {
    fullname(state){
      return state.name + '111';
    },
    fullname2(state,getters){
      return getters.fullname + '222'
    },
    fullname3(state,getters,rootState){
      return getters.fullname2 + rootState.counter
    }
  },

模块内的actions
actions的参数是context
模块内的 context.commit() commit只调用模块内的mutation！

对象解构

const obj = {
  name: 'why',
  age: 18,
  height: 1
}
//顺序无需一致
const {name,height,age} = obj;
console.log(name); //why

actions的另外一种写法

incrementIfOddOnRootSum({state,commit,rootState})