Vue2Vuex

Vuex是什么？

概念：专门在vue中实现集中状态（数据）管理的一个vue插件，对vue应用中多个组价的共享状态进行集中式的管理（读/写），也是一种组件通信的方式，且适用于任意组件通信。

事件总线与Vue实现对比

什么时候使用Vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态
3. 多个组件需要共享数据时

工作原理图

搭建Vuex环境

1. 安装npm i vuex
2. 引入Vuex import Vuex from 'vuex' Vue.use(vuex)
3. 引入后就存在了$store属性
4. 创建文件：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
});

5. 在main.js中创建vm时传入store配置项引入

import store from './store/index'
new Vue({   
		render: h => h(App),   
		store,   
		beforeCreate(){
    		Vue.prototype.$bus = this;   
    } 
}).$mount('#app')

6. 组件中读取vuex中的数据：$store.state.xxx
7. 组价中修改vuex中的数据：$store.dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名',数据)
8. 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方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed:{
   	//借助mapState生成计算属性，sum、school、subjuect（对象写法）
   	...mapState(['sum','school','subjuect'])
    }
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed:{
   	//借助mapGetters生成计算属性，bigSum(对象写法)
   	...mapGetters({bigSum:'bigSum'})
   	//借助mapGetters生成计算属性，bigSum(数组写法)
   	...mapGetters(['bigSum'])
   }
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
   	//靠mapActions生成，incrementOdd、incrementWait(对象形式)
   	...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'})
   	//靠mapActions生成，incrementOdd、incrementWait(数组形式）
   	...mapActions(['incrementOdd','incrementWait'])
   }
   

4. mapMutations方法：用于帮助我们生成与mutaions对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
   	//靠mapActions生成，increment、decrement(对象形式)
   	...mapMutations({increment:'Jia',decrement:'JIAN'})
   	//靠mapMutations生成，Jia、JIAM(对象形式）
   	...mapMutations(['Jia','JIAN'])
   }
   

Vuex模块化编码+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 修改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,
     },
   });
   

3. 开启命名空间后，组件中读取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"])