526互联

Vue 中 vuex 的使用

发布时间 2023-11-23 16:36:16作者: 误会馋

一、内容：
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'])}