vuex学习笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

所谓的状态管理，作用就是定义状态，修改状态。

定义state

在vue里使用Vuex以及在vuex中定义状态的方式：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg:'状态管理里的msg'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

与vueRouter类似首先将vuex通过vue.use方法注入到vue实例里，然后new一个store出来，每一个vuex的核心就是store（仓库），根据vue单一状态数规则，一个项目里仅需一个store，所有状态都放到这里进行管理。

Getters

getters相当于store的计算属性，接收store的state属性座位第一个参数，也可以接收其他getter作为第二个参数

//getters使用方法
getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

//外部组件中使用它
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

修改状态：

直接通过$store.status.count=XXX这种方式是可以修改状态的，但是这样在严格模式下会报错，并且不符合vuex修改状态的流程。

更改store中的状态的唯一方法应该是提交mutation。

严格模式：

仅需在创建store的时候传入strict：true

const store = new Vuex.Store({
  strict: true
});

通过mutations修改状态：

//store中写法
state: {
    msg:'状态管理里的msg',
    count:0
  },
  mutations: {
//此种方法虽然也可以成功修改状态，但是不是提倡的写法，mutations里定义的方法默认第一个参数是state中的全部状态
//    addCountStatus(){
//      this.state.count++;
//    }
//提倡写法
   addCountStatus(state){
     state.count++;
    }
  },
//外部使用时触发方法：
methods:{
  CountStatus(){
    this.$store.commit('addCountStatus');
  }
}
//定义一个方法，通过触发该方法达到触发store中的mutations方法的目的

提交mutation：

想要触发mutations里面定义的方法，唯一的方式是$store.commit，commit方法传参必须至少有一个能区分的唯一标识，这个标识就是type。
当 commit 的参数是一个对象的时候，对象里必须要有 type 字段，除了 type 字段，你还可以添加额外任意字段为载荷（payload）。

对象方式提交commit (参数是对象)

//外部触发
 changeStatus(count){
    this.$store.commit({
      type:'testChange',
      payload:count
    })
//store:
    testChange(state,num){
      console.log(num)//这里拿到的是全部的payload参数
      state.count+=num.payload;
    }

type做第一参数

以commit(type,[payload])的形式提交，官方称此为以载荷形式提交。

store.commit("increment");
store.commit("increment", 10);
store.commit("increment", { count: 2 });//store中接收到的就是第二个参数中的传值

在大多数情况下，payload 应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。

在哪里使用mutation：

Vue 应用的组件里，在组件里调用store.commit。
还有 store 的 action 里。

Action：

Action与mutation的不同点：

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

注册action：

context.commit 提交一个 mutation，
context.state获取 state。
context.getters 获取 getters。

分发Action（调用Action中定义的函数）

Action 通过 store.dispatch方法触发：

// 以载荷形式分发
this.$store.dispatch("incrementAsync", {
 XXX:xxx
});

// 以对象形式分发
this.$store.dispatch({
  type: "incrementAsync",
  XXX:xxx
});

Action处理异步

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise，因此，通过 async / await，很方便控制流程
不要想复杂了，js里怎么处理异步，在Action里面就怎么处理，Vuex只是把异步操作放到了Action里面，其他用法差不多。

actions: {
    A(){
      return new Promise((resove)=>{
        setTimeout(() => {
          console.log('A函数执行')
          resove();
        }, 3000);
      })
    },
    async B(context){
      await context.dispatch('A')
      context.commit('logmutations')
    }
  },

Model

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态