Vuex是什么?
概念:专门在vue中实现集中状态(数据)管理的一个vue插件,对vue应用中多个组价的共享状态进行集中式的管理(读/写),也是一种组件通信的方式,且适用于任意组件通信。
事件总线与Vue实现对比
什么时候使用Vuex
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
- 多个组件需要共享数据时
工作原理图
![](https://i-blog.csdnimg.cn/blog_migrate/fd8a08ce438f0da3a19728ee21623a74.png)
搭建Vuex环境
- 安装
npm i vuex
- 引入Vuex
import Vuex from 'vuex'
Vue.use(vuex)
- 引入后就存在了$store属性
- 创建文件:
src/store/index.js
// 引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from "vuex"; // 应用Vuex插件 Vue.use(Vuex) // 准备actions,用于响应组件中的动作 const actions = {}; //准备mutations,用于操作数据(state) const mutations = {}; // 准备state,用于存储数据 const state = {}; // 创建并导出store export default new Vuex.Store({ actions, mutations, state });
- 在main.js中创建vm时传入store配置项引入
import store from './store/index' new Vue({ render: h => h(App), store, beforeCreate(){ Vue.prototype.$bus = this; } }).$mount('#app')
- 组件中读取vuex中的数据:
$store.state.xxx
- 组价中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
- getters的使用
(1)概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
(2)在store.js中追加getters配置//准备getters,用于将state中的数据进行加工 const getters = { bigJia(state) { return state.cout + 100; }, }; export default new Vuex.Store({ ... ... getters });
(3)组件中读取数据:
$store.getters.bigJia
案例使用
main.vue
import Vue from "vue";
import App from "./App.vue";
import store from "./store/index";
// 创建Vue实例对象
new Vue({
render: (h) => h(App),
store
}).$mount("#app");
store/index.js
// 引入Vue核心库
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions,用于响应组件中的动作
const actions = {
jia(context, value) {
context.commit("Jia", value);
},
};
// 准备mutations,用于操作数据(state)
const mutations = {
Jia(state, value) {
state.cout += value;
},
jian(state, value) {
state.cout -= value;
},
};
// 准备getters,用于将state中的数据进行加工
const getters = {
bigJia(state) {
return state.cout + 100;
},
};
// 准备state,用于存储数据
const state = {
cout: 0,
};
// 创建并导出store
export default new Vuex.Store({
actions,
mutations,
state,
getters,
});
App.vue
<template>
<div id="app"><Count></Count></div>
</template>
<script>
import Count from "./components/Count";
export default {
name: "App",
components: {
Count,
},
};
</script>
Count.vue
<template>
<div>
{{ $store.state.cout }}{{ $store.getters.bigJia}}
<button @click="add">增加</button>
<button @click="reduce">减少</button>
</div>
</template>
<script>
export default {
name: "Count",
methods: {
add() {
this.$store.dispatch("jia", 1);
},
reduce() {
this.$store.commit("jian", 1);
},
},
};
</script>
四个map方法的使用
-
mapState方法:用于帮助我们映射
state
中的数据为计算属性computed:{ //借助mapState生成计算属性,sum、school、subjuect(对象写法) ...mapState(['sum','school','subjuect']) }
-
mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性computed:{ //借助mapGetters生成计算属性,bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性,bigSum(数组写法) ...mapGetters(['bigSum']) }
-
mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)的函数methods:{ //靠mapActions生成,incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}) //靠mapActions生成,incrementOdd、incrementWait(数组形式) ...mapActions(['incrementOdd','incrementWait']) }
-
mapMutations方法:用于帮助我们生成与
mutaions
对话的方法,即:包含$store.commit(xxx)的函数methods:{ //靠mapActions生成,increment、decrement(对象形式) ...mapMutations({increment:'Jia',decrement:'JIAN'}) //靠mapMutations生成,Jia、JIAM(对象形式) ...mapMutations(['Jia','JIAN']) }
Vuex模块化编码+命名空间
- 目的:让代码更好维护,让多种数据分类更加明确。
- 修改store.js
const countAbout = { namespaced:true,//开启命名空间 actions: { jia(context, value) { context.commit("Jia", value); }, }, mutations: { Jia(state, value) { state.cout += value; }, jian(state, value) { state.cout -= value; }, }, getters: { bigJia(state) { return state.cout + 100; }, }, state: { cout: 0, }, } export default new Vuex.Store({ modules: { CountAbout, }, });
- 开启命名空间后,组件中读取state数据
方式一:自己直接读取
this.$store.state.CountAbout.count
方式二:借助mapState读取
...mapState("CountAbout", ["cout"])
开启命名空间后,组件中读取getters数据
方式一:自己直接读取
this.$store.getters['CountAbout/firstName']
方式二:借助mapGetters读取
...mapGetters("CountAbout",["bigJia"])
开启命名空间后,组件中调用dispatch
方式一:自己直接dispatch
this.$store.dispatch['CountAbout/addPersonWang',person]
方式二:借助mapActions读取
...mapActions("CountAbout", ["jia"]),
开启命名空间后,组件中调用commit
方式一:自己直接commit
this.$store.dispatch['CountAbout/ADD_PERSON',person]
方式二:借助mapMutations读取
...mapMutations("CountAbout", ["jian"])