Vue教程20：Vuex入门

示例代码请访问我的GitHub&＃xff1a; github.com/chencl1986/…

该节教程代码可通过npm start运行devServer&＃xff0c;在http://localhost:8080/查看效果

Vuex简介

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

Vuex具有以下特点&＃xff1a;

1. 全局 Vuex类似于一个全局变量&＃xff0c;它在整个Vue应用中生效。
2. 统一 只要状态修改&＃xff0c;都会自动通知到所有相关组件&＃xff0c;不需要使用者主动推送。
3. 单一 在全局中只需要保存一份&＃xff0c;即可在全局中使用。

Vuex解决了哪些问题&＃xff1a;

1. 数据跨组件共享&＃xff0c;数据的传输不再受到父子级限制&＃xff0c;可以在各级组件中任意获取。
2. 防止数据被意外篡改&＃xff0c;Vuex会记录数据被修改的详细信息&＃xff0c;如修改状态的组件、时间、代码位置等&＃xff0c;便于定位和追踪错误&＃xff0c;同时也方便了调试和测试。

Vuex的状态管理示意图详解

Vuex的使用

代码示例&＃xff1a;/lesson20/src/main.js

先使用vue-cli创建一个项目&＃xff0c;之后使用npm install vuex --save安装Vuex&＃xff0c;就可以在/src/main.js中配置Vuex&＃xff1a;

// 1. vuex-引入
import Vuex from &＃39;vuex&＃39;// vue-cli自带的编译配置
Vue.config.productionTip &＃61; false// 1. vuex-在Vue中使用Vuex&＃xff0c;让Vuex中的操作挂载到Vue中。
Vue.use(Vuex)// 3. vuex-声明store对象
const store &＃61; new Vuex.Store({strict: process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39;, // 严格模式&＃xff1a;防止直接修改state&＃xff0c;只能用Mutations操作&＃xff0c;由于strict模式是通过对象深度匹配进行&＃xff0c;生产模式打开会严重影响性能。state: {a: 12, b: 5}, // 核心&＃xff1a;数据mutations: { // 定义Mutations},actions: { // 定义actions},getters: {}, // 类似于computedmodules: {} // 将store拆分成多个命名空间&＃xff0c;分开使用。
})/* eslint-disable no-new */
new Vue({el: &＃39;#app&＃39;,router,store, // 将store挂载到Vue实例中。components: { App },template: &＃39;&＃39;
})


读取state的值

代码示例&＃xff1a;/src/components/Index.vue

在Index.vue中可以通过$store.state.a读取到已定义的a的值。

修改state的值

接下来实现在Cmp1.vue组件中&＃xff0c;点击按钮后修改state中的a的值。

代码示例&＃xff1a;/src/components/Cmp1.vue

在main.js中定义Actions和Mutations。

代码示例&＃xff1a;/lesson20/src/main.js

const store &＃61; new Vuex.Store({strict: process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39;, // 严格模式&＃xff1a;防止直接修改state&＃xff0c;只能用Mutations操作&＃xff0c;由于strict模式是通过对象深度匹配进行&＃xff0c;生产模式打开会严重影响性能。state: {a: 12, b: 5}, // 核心&＃xff1a;数据mutations: { // 定义Mutations&＃xff0c;通过action触发并更新state&＃xff0c;Vue Devtool可以监听到数据的修改情况。add (state, n) { // 第一个参数为旧state&＃xff0c;第二个参数为action中commit传入的参数。state.a &＃43;&＃61; n}},actions: { // 定义actions&＃xff0c;actions被触发后&＃xff0c;将数据提交给Mutations进行处理并更新state。add ({ commit }, n) { // 第一个参数为context对象&＃xff0c;它不是store本身&＃xff0c;可以通过context.commit提交一个Mutation。第二个参数为用于更新state的参数。commit(&＃39;add&＃39;, n)}},getters: {}, // 类似于computedmodules: {} // 将store拆分成多个命名空间&＃xff0c;分开使用。
})