详解vuex状态管理模式

一、前言 本次接受一个BI系统，要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化，这一个系统为了接入公司自身的产品，后端技术采用spring boot，前端采用vue+vuex+axios的项目架构方式，vuex作为vue的状态管理，是尤为重要的部分。这里，我将vuex如何运作和使用做一次总结，有错的地方，望多多提点。 二、vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹，命名为store，建立index.js 如图所示： 在index.js中引入vue和vuex状态管理，并导出vuex，代码如下： impo 【Vuex概述】 Vuex是Vue.js应用的状态管理模式，它采用集中式存储管理应用程序的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在大型的Vue项目中，随着组件间的交互增加，状态管理变得复杂，Vuex提供了一种统一的方式来管理这些状态。 【Vuex的安装】 在Vue项目中安装Vuex，可以使用npm命令行工具执行以下命令： ```bash cnpm install vuex --save ``` 然后在项目的`src`目录下创建一个名为`store`的文件夹，里面包含`index.js`文件，用于定义和导出Vuex Store。 【Vuex的基本使用】 在`index.js`中，引入Vue和Vuex库，创建一个新的Vuex Store实例，如下： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { token: 0 } }) export default store ``` 在主入口文件`main.js`中，引入并使用创建好的Store： ```javascript import Vue from 'vue' import App from './App.vue' import store from './store/index' Vue.config.productionTip = false new Vue({ render: h => h(App), store }).$mount('#app') ``` 【获取Store中的状态】 在Vue组件中，可以通过`this.$store.state`访问Store中的状态，例如获取`token`： ```javascript console.log(this.$store.state.token) ``` 【Getters】 Getters是用于在获取状态时进行计算或处理的函数，可以在组件中通过`this.$store.getters`访问。例如，定义一个getter来获取`token`： ```javascript getters: { getToken(state) { return state.token; } } ``` 可以使用`mapGetters`辅助函数将getter映射到组件的计算属性上，简化使用： ```javascript import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(["getToken"]) }, mounted() { console.log(this.getToken) } } ``` 【Mutations】 Mutations是改变Store状态的唯一途径，它们是同步的。例如，定义一个mutation来更新`token`： ```javascript mutations: { setToken(state, n) { state.token = state.token + n; } } ``` 在组件中通过`commit`方法触发mutation： ```javascript import { mapActions } from 'vuex' export default { methods: { ...mapActions(["setToken"]), someMethod() { this.setToken(1); } } } ``` 【Actions】 Actions用于异步操作，它们可以触发mutations。例如，定义一个action来设置`token`： ```javascript actions: { setToken({ commit }, n) { commit('setToken', n); } } ``` 同样，可以使用`mapActions`将action映射到组件的方法上： ```javascript import { mapGetters, mapActions } from 'vuex' export default { methods: { ...mapActions(["setToken"]), someMethod() { this.setToken(1); } } } ``` 【Modules】 当项目状态变得庞大时，Vuex支持将Store拆分为多个模块。每个模块都有自己的`state`、`getters`、`mutations`和`actions`。如果启用了`namespaced: true`，在访问模块内的状态和方法时需要指定模块名： ```javascript const myModule = { state: { token: 0 }, getters: { getToken: state => state.token }, mutations: { setToken(state, n) { state.token = state.token + n; } }, actions: { setToken({ commit }, n) { commit('setToken', n); } }, namespaced: true } const store = new Vuex.Store({ modules: { myModule } }) ``` 在组件中，访问namespaced模块的状态和方法需要加上模块名前缀： ```javascript import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters('myModule', ["getToken"]), }, methods: { ...mapActions('myModule', ["setToken"]), someMethod() { this.setToken(1); } } } ``` 以上就是Vuex的基础使用和核心概念，包括状态管理、Getters、Mutations、Actions以及模块化。通过理解和掌握这些，可以更有效地组织和管理Vue应用程序的状态，提高开发效率和代码可维护性。