Vuex状态管理的使用

提示：集中式存储管理应用的所有组件的状态

---

一、Vuex的index.js文件（对应第二节）

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import user from './modules/user'
export default new Vuex.Store({
	 state: {	   // 是存放数据的[类似于组件中的data]
	 	name: "张三",
	   	age: 20,
	   	num: 10,
	 },   
	 getters: {    // 是一个计算属性[类似于组件中的computed]
	 	total( state ){
        	return state.age + state.num
     	}
	 },
	 mutations: {  // 是存放方法的[类似于组件中的methods]
	 	addAge( state ){
        	state.age ++ 
     	},
     	setAge( state, ages ){ // 修改Vuex的age值，带参
     		state.age = ages
     	}
	 },
	 actions: {   // Action提交的是mutation，而不是直接改变状态
	 	//Action 类似于 mutation，不同在于：
		// 1、Action 提交的是 mutation，而不是直接变更状态。
		// 2、Action 可以包含任意异步操作，mutations是同步操作
		// 3、Action 更加容易调试
		//（例如：调试工具：Action可以看到定时器运行age+1后的值，mutation只能看到定时器运行age+1之前的值，但是state中的年龄值都是定时器age+1后的值）
		
		actionChangeAge({commit, getters}){
      		console.log(getters.total)  // 调用getters里的方法
			commit('addAge')  // 调用mutations里的方法
		}
	 	
	 },
	 modules: {  //模块化（分成用户、购物车等模块，方便后期维护）
		 user, //Vuex用户模块（使用方法看第三节内容）
	 },
});

二、使用Vuex中的数据（对应第一节）

<template>
  <div id="app">
	<!-- 页面直接使用 -->
    {{ $store.state.name }}
    {{ $store.state.age }}
    <!-- 引入使用 -->
    {{ name }}
    {{ age }}
	<!-- 求和 -->
	{{ total }}
	<!-- Vuex mutations 方法 -->
	<button @click="addAge">点击增加年龄</button>
	<button @click="changeAge">点击修改年龄</button>
	<!-- Vuex actions 方法 -->
	<button @click="actionChangeAge">点击增加年龄</button>
  </div>
</template>

<script>
	import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
	export default{
		computed: {
      		...mapState(['name','age']),
      		...mapGetters(['total'])
   		},
   		methods: {
        	...mapMutations(['addAge','setAge']),
        	...mapActions(['actionChangeAge']),
        	changeAge(){
	        	this.setAge(10)  // 传参
	      	},
        }
	}
</script>

三、 modules模块化的使用（大项目建议使用）

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import user from './modules/user'
export default new Vuex.Store({
	 modules: {  //模块化（分成用户、购物车等模块，方便后期维护）
		 user, //Vuex用户模块
	 },
});

// store/modules/user.js Vuex用户模块
export default {
	 state: {
		 userInfo:{}	
	 },  
	 getters: {},
	 mutations: {},
	 actions: {},
}

// 组件使用Vuex中的user数据
<template>
  <div id="app">
	{{ userInfo }}
  </div>
</template>

<script>
	import { mapState } from 'vuex'
	export default{
		computed: {
			// 获取state变了
      		...mapState({
      			// userInfos 可以是任意变量
				userInfos:state=>state.user.userInfo
			})
   		},
   		methods: {
        	...mapMutations(['addAge']) 
        }
	}
</script>

四、使用Vuex每个属性单独文件存放（页面使用方法不变）

// store/state.js文件（其他文件一样）
export default {
	str: 'state数据str'
}

// store/index.js文件
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
	 state,  
	 getters,
	 mutations,
	 actions,
	 modules: {},
});