1.前言这次接受一个BI系统，需要访问数据源-获取数据集-处理数据集-展示数据可视化，本系统用于访问公司自有产品，后端技术采用springboot，前端采用vue+vuex+axios的项目架构方式。作为vue的状态管理，vuex是一个特别重要的部分。在这里，我就vuex的工作原理和使用做一个总结。如果有不对的地方，希望大家指出。2、vuex的简单使用安装vuexcnpminstallvuex--save在src目录下创建一个文件夹，命名为store，创建index.js如图：在index.js中引入vue和vuex状态管理，并导出vuex，代码如下：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{token:0},})exportdefaultstore;刚刚在main.js中引入了创建好store作为Vue的storeimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store/index'Vue.config.productionTip=falsenewVue({render:h=>h(App),store}).$mount('#app')获取store中的token在vue组件中，如果想获取vuex中的全局数据，可以想到vue作为一个类，它下面有很多属性，其中包括我们刚刚注入的vuex。如图所示，我们可以看到vue本身就是一个json，下面有一个$store的对象，$store下面有一个state，state就是我们在vue中存储的全局数据，我们的数据可以通过组件中的this.$store.state.token获取。3、getters，vuex的核心概念有时候我们需要对获取到的数据做一些简单的过滤或者处理的时候，getters就起到了作用。代码如下getters:{getToken(state){returnstate.token;}和直接获取token的方式是一样的。$store下也挂载了getter，所以我们可以通过this.$store.state.getters.getToken来调用它的函数。但是vuex为我们提供了mapGetters，可以把它映射到对应的getters上。用法如下console.log(this.getToken)console.log(this.$store.getters.getToken)},}映射的getter仍然挂载在vue上，如图4.mutations和actions，vuex的核心概念，我们可以把突变理解为一个事件函数，而动作就是触发器，动作是通过动作发起的。简单的示例代码如下。突变：{setToken(state,n){state.token=state.token+n;}},actions:{setToken({commit},n){commit('setToken',n)}}incomponents,用法同getters，代码如下import{mapGetters,mapActions}from'vuex'export默认{name:'app',组件:{HelloWorld},计算:{...mapGetters(["getToken"])},mounted(){console.log(this)console.log(this.setToken(1))console.log(this.getToken)},methods:{...mapActions(["setToken"])},vue中的json，也可以找到相同的属性。5.Mudules，vuex的核心概念，让我们可以把store分成不同的module。每个单独的模块都有四个存储核心：getters、state、mutations和actions。需要注意的是，如果namesapced:true是在模块内部添加了一个属性。取值时需要稍作改动。通过mapGetters和mapActions进行映射时，需要使用模块名作为路径来获取模块的getters和action。模块化代码如下importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)constmoduleA={namespaced:true,state:{a:1},mutations:{},actions:{},getters:{geta(state){返回state.a;}}}constmoduleB={namespaced:true,state:{b:1},mutations:{},actions:{}}conststore=newVuex.Store({state:{token:0},getters:{getToken(state){returnstate.token;},},mutations:{setToken(state,n){state.token=state.token+n;}},actions:{setToken({commit},n){commit('setToken',n)}},modules:{a:moduleA,b:moduleB},})exportdefaultstore;在组件中获取模块A的值时，我们看一下geta的getters属性，vue中的state，如图所示的geta是模块a下的getters属性，需要计算：{//...mapGetters(["getToken"])...mapGetters("a",["geta"])},mounted(){控制台。日志（这个）骗局sole.log(this.geta)如果模块没有命令空间，vuex会自动将模块中的getters和actions作为全局的注入，按照原来的获取方式即可。6.总结这是我对vuex的基本使用和基本认识，vuex当然不可能局限于此，这里只做最简单的，做一个总结也相当于写下来，据说vue3块出来了，是用ts重写的vue，到时候再来看看，vue3有哪些变化，有哪些优点。如果本文所写的内容有任何错误，请随时指出。共同进步。
