一、内容:
1.vuex 是 vue 中实现“集中式数据管理”的一个 vue 插件。
2.被管理的数据,是组件共享的,任意组件都可以访问管理。
3.vuex 包含三个部分:actions(动作), mutations(加工), state(状态)。
4.工作原理:
(1)组件欲发起动作(即修改数据)。
(2)向vuex中的actions分发(dispatch)动作,
(3)actions向mutations提交(commit)动作;
(4)mutations加工state;
(5)state 发生变化,vuex 渲染组件页面。
注意:在 actions 中,集中处理业务逻辑,或其他准备工作(如,向服务器请求数据)等。
如不需要业务处理,则可以忽略,即组件可以略过 actions 直接向 mutations 提交动作。
5.由 store(仓库) 统一管理 actions, mutations, state,组件只与 store 打交道。
二、安装:
执行命令:cd xxxx(项目目录)
执行命令:npm i vuex@3 【vue2 项目使用 vuex@3, vue3 项目使用最新版vuex】
三、引入‘Vuex 插件库’:
在main.js中添加:
import Vuex from 'vuex'; Vue.use(Vuex);
四、创建 store
在 src 目录下创建目录 store,在目录 store 下创建文件 index.js。
在 index.js 中创建 actions, mutations, state, 并new 一个 store:
//用于构建 vuex 的 store import Vuex from 'vuex'; const actions ={ }; const mutations ={ }; const state ={ }; const store = new Vuex.Store({ actions, mutations, state }); export default store;
五、引入配置好的‘store’,并将其交给 vm:
在 main.js 添加:
import Vue from 'vue';
import Vuex from 'vuex'; import store from './store'; import App from './App.vue'; Vue.config.productionTip = false; Vue.use(Vuex); export default new Vue({ el:'#app', render: h => h(App), store });
六、修改引入顺序
1.需要修改的原因是:
在 main.js 中,import store from './store'; 先于 Vue.use(Vuex); 执行,这将导致 store/index.js 中的 new Vuex.Store() 先于 Vue.use(Vuex); 执行;
而 Vue.use(Vuex); 必须在 new Vuex.Store() 之前。
2.修改的方式:
(1)在 main.js中移除语句:import Vuex from 'vuex'; 和 Vue.use(Vuex);
(2)在目录 store 下 index.js 文件中,添加 import Vue from 'vue'; 在 new Vuex.Store() 之前, 添加语句:Vue.use(Vuex);
(3)index.js 实际为:
//用于构建 vuex 的 store import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const actions ={ }; const mutations ={}; const state ={}; const store = new Vuex.Store({ actions:actions, mutations:mutations, state:state }); export default store;View Code
main.js 实际为:
import Vue from 'vue'; import store from './store'; import App from './App.vue'; Vue.config.productionTip = false; export default new Vue({ el:'#app', render: h => h(App), store });View Code
七、使用
1.组件中使用vuex中的数据: this.$store.state.xxxdata
2.组件中修改vuex中的数据: this.$store.dispatch('actionname', value) 或 this.$store.commit('mutationname', value)
3.import { mapState, mapGetters } from 'Vuex';
computed:{...mapState(['sum'])}