Vuex状态管理

Vuex：管理组件中共用的一些状态，并能够做一些操作

一、准备工作

1. 安装Vuex
   ① 默认安装vuex4版本：执行命令 npm install vuex
   ② 指定安装vuex3版本：执行命令 npm install vuex@3

2. 引入Vuex
   在src目录下新建名称为store的文件夹，并在内部新建index.js

   import Vue from 'vue';
   import Vuex from 'vuex';
   Vue.use(Vuex);
   
   export default new Vuex.Store({
   	state: {},
   	actions: {},
   	mutations: {},
   	getters: {}
   });
   

3. 将上方声明的store引入到项目main.js中
   【配置完此步，所有的vm、vc都有了$store字段】

   import Vue from 'vue';
   import App from './App';
   import store from './store';  // 默认引入了index.js
   new Vue({
   	render: h => h(App),
   	store  // 配置store
   }).$mount('#app');
   

4. 方法说明
   

① state对象用于存储状态
② actions中不能直接修改state的值，一般是做一些判断，如果不需要做判断可省略actions，直接调用commit触发mutations中的方法修改state值即可
③ mutations中配置的方法可直接修改state中的值，在vue-devtools中可观察到
④ 在组件中利用this.$store.dispatch(‘方法名’, params)触发actions中配置的方法
⑤ 在组件中利用this.$store.commit('方法名', params)触发mutations中配置的方法
⑥ getters配置项类似于组件中的computed，也具有返回值

二、案例：记录总和

1. 组件

   <template>
   	<div>
   		<h2>总和为{{$store.state.sum}}</h2>
   		<p>总和前面拼接@为：{{$store.getters.addPrefix}}</p>
   		<select v-model="addend">
   			<option :value="1">1</option>
   			<option :value="2">2</option>
   		</select>
   		<button @click="addNum()">+</button>
   		<button @click="addNumGt5()">总和＞5时才+</button>
   	</div>
   </template>
   <script>
   export default {
   	name: 'Child',
   	data() {
   		return {
   			addend: 1  // 加数
   		}
   	},
   	methods: {
   		addNum() {
   			this.$store.commit('addNum', this.addend);
   		},
   		addNumGt5() {
   			this.$store.dispatch('addNumGt5', this.addend);
   		}
   	}
   }
   </script>
   

2. 状态管理

   import Vue from 'vue';
   import Vuex from 'vuex';
   Vue.use(Vuex);
   export default new Vuex.Store({
   	state: {
   		sum: 0               
   	},
   	actions: {
   		addNumGt5(context, value) {
   			if (context.state.sum > 5) {
   				context.commit('addNum', value);
   			}
   		}
   	},
   	mutations: {
   		addNum(state, value) {
   			state.sum += value;
   		}
   	},
   	getters: {
   		addPrefix(state) {
   			return '@' + state.sum;
   		}
   	}
   });