Vuex是什么？

官方文档是这样解释的：

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

vuex配置：

①创建store文件夹，在此文件夹下创建index.js文件

//index.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法--操作state的方法
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  }
})

②在main.js中引入store文件夹

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
    store,
    render: h => h(App)
}).$mount('#app')

vuex的安装详见官网，这里我就不做赘述了。下面我们来看看它的核心思想：State , Getter , Mutation , Action?以及?Module。

State:

作为一个“唯一数据源 (SSOT)”而存在。公共数据统一存放至store的state中。在state中定义的数据可以在任意组件中进行调用。

const store = new Vuex.Store({
    state: {
         age: 10
    }
});

使用时通过$store.state.age即可拿到想要获取到的数据。

Getter:

类似于computed，可以认为是store中的计算属性。可以在数据展示前对其进行处理。

getters: {
    addAge(state){
        return state.age + 1;
    }
}

通过$store.getters.addAge可获取getters中改变的数据。

Mutation:

vuex中为我们提供的唯一的修改仓库store中状态的方法，就是通过提交mutation，且必须是同步函数。

mutations:{
    increment(state，value){
        state.age += value;
    }
}

调用方法：

export default{
    methods: {
        addAge(value){
            this.$store.commit("increment",value)
        }
    }
}

Action:

用于提交mutation而不是直接改变状态，可以包含任意异步操作。只能通过action=>mutation=>state这个流程执行。

export default new Vuex.Store({
    state: {
        stu: {},
    },
    mutations: {
        getStu(state, Object) {
            state.stu = Object
        }
    },
    //2.接受dispatch传递过来的方法和参数
    actions: {
        getStuSync(store, Object) {
            setTimeout(() => {
                store.commit('getStu', Object);
            }, 1000)
        }
    }
})

调用方法：

export default{
    methods: {
        setStu(){
            let stu = {name: '张三',sex: '男',age: 18}
            this.$store.dispatch('getStuSync',stu);
        }
    }
}

Module:

见明知意，模块，分模块管理数据，每个模块都有各自的?state、mutation、action、getter?甚至是嵌套子模块

①配置index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

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

②moduleA.js

export default {
    state: {
        message: '模块A'
    },
    getters: {},
    mutations: {},
    actions: {}
}

③使用方法：

export default{
    data(){
        return{
            getMessage: ''
        }    
    },
    mounted: {
         this.message = this.$store.state.moduleA.message;
    }
}

?模块内部的 state 是局部的，只属于模块本身所有，外部必须通过对应的模块名进行访问。