vue从入门到放弃之------详细介绍Vuex的使用

一、Vuex是什么？

        官方的介绍是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（我的理解就是把你需要在很多地方使用的变量归置在一个对象的state属性中，并且这些变量的获取需要通过特殊的方式getters中定义的方法，修改这些变量则需要通过特殊的方法，action提交mutation中定义的方法来修改state中定义的状态）

二、Vuex的安装

1、安装Vuex

npm install vuex --save

2、引入并使用Vuex，在模块化打包系统中分为以下两步，在脚手架创建的目录如下：

<1>、在模块化的src文件夹下新建store文件，在其中新建index.js文件(文件名不固定)

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  modules:{}
});

<2>、在main.js中导入该store.js的模块

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";    //导入store模块

Vue.config.productionTip = false;
new Vue({
  router,
  store,                //注入store
  render: h => h(App)
}).$mount("#app");

三、Vuex中各项介绍

1、state：官方的解释是用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在（我的理解就是对象里边注册的属性就是你需要在组建中调用的变量）

state: {
    num:15
}

2、getter：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算(什么意思呢，就是说组建中只有通过getters获取到的state中的状态，才会在修改该状态的时候组件中的状态跟着一起响应)

getters:{
    getnum: state=>{
      return state.num;
    }
},

在组件中调用（此处一定得不能放在data中，此处的数据是需要根据vuex中state的变化而变化的）：

computed:{
    getnum(){
      return this.$store.getters.getnum    
    }
 }

3、mutation：官方的解释是更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)（个人理解是一个方法的集合，其内部每个方法都是定义用来操作修改state中的状态的方法，修改state中的状态需要调用此处定义的函数）

  mutations: {
    addNum(state,n){
      state.count += n;
    },
    subNum(state,n){
      state.count -=n;
    }
  }

但是，mutations中的方法有以下几点限制：

(1)、mutations中的方法不可以直接调用，需要通过store.commit 方法来提交

(2)、mutation必须是同步函数

(3)、mutation的提交也可以在组件中使用this.$store.commit('xxx')

4、action：官方的介绍，action类似于 mutation，不同在于（我个人的理解action就是用来提交mutation方法的集合）：

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

//action的定义
actions: {
    addNum (context) {
      context.commit('addNum',1)
    },
    subNum (context) {
      context.commit('subNum',1)
    }
  }

在组件中的调用，使用store.dispatch

methods:{
    addnum(){
      this.$store.dispatch('addNum')
    },
    subNum(){
      this.$store.dispatch('subNum')
    }
  }

5、module：当一个项目过于庞大，状态过多的时候，如果还使用单个的状态树，会使得状态树变得庞大，臃肿，不利于管理，这个时候我们可以将store分为多个状态树，每个模块拥有自己的 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 的状态

这样，vuex的使用就说到这，2021 Show me the money.