vuex状态管理

vuex是干啥的？

• Vuex是一个专门为vueJS程序开发的状态管理模式，他以集中式存储管理所有组件的状态！

什么时候使用Vuex？

• 不是所有的Vue项目都需要使用Vuex！
• 一般在大中型项目中才会使用Vuex（状态管理的结构清晰修改简单，易于维护）！
• 多个组件共享状态时或组件间传值频繁时！

项目中如何使用Vuex？

• 首先你有完善的node环境，有一个搭建完成的vue项目
• 安装Vuex

$ npm install --save vuex

• 新建store.js文件（上代码）

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const Store = new Vuex.Store({
	state:{
		name: 'MY',
		age: '18',
	},
	// 同步函数更改state状态
	mutations: {
		// 更新name（name参数为对应值---更新name时this.store.commit('changeName','WJL')）
		changeName(state,name) {
			state.name = name;
		},
		// 更新age (age参数为对应值---更新age时this.store.commit('changeAge', '45'))
		changeAge(state,age) {
			state.age = age;
		},
		// 更新所有(obj参数为对象---更新时name时this.store.commit('changeAll', {name: 'MHT'}),同时更新name&&age时，this.store.commit('changeAll', {name: 'MHT',age: '55'}))
		changeAll(state,abj) {
			for (let k in obj) {
				state[k] = obj[k]
			}
		}
 	},
 	// getters相当于对state的值做进一步处理，当state值改变时getters中对应的输出也会变化，getters中的值可以直接在页面中显示
	getters: {
        filterName (state,getters) {
            return state.name + '-----' + getters.filterAge
        },
        filterAge (state) {
            return Number(state.age) + 10
        }
    },
    // 异步函数更改state状态(Actions 提交的是mutations，而不是直接变更状态)
	actions: {
		changeName({ commit },name) {
			commit('changeName',name)
		},
		changeAge({ commit },age) {
			commit('changeAge',age)
		},
		changeAll({ commit }, obj) {
			commit('changeAll',obj)
		}
	},
})

export default Store;

• 添加到Vue实例中

// main.js
import Vue from 'vue';
import router from './Route/router'
import store from './store';

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

• 组件中使用store

// 页面中显示state
<template>
  <div class="hello">
  	<h1>{{ message }}</h1>
  	<div>{{ filterName }}</div>
    <h2>{{`我叫${name},今年${age}岁`}}</h2>
   </div>
</template>
<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default {
		data() { 
			return {
				message: '实例组件'
			}
		},
		computed: {
			...mapState(['name','age']),
			...mapGetters(['filterName',['filterAge'])
		},
		created() {
		// 组件中可以通过this.$store来访问store
			this.$store.commit('changeAll', {name:'MY',age:'50'})
			this.$store.dispatch('changeName', 'MY')
		// 通过...mapMutations(['changeName','changeAge','changeAll']),...mapActions(['changeName','changeAll'])导入motheds之后可以,以上的两种调用方式等同于一下方式：
		this.changeAll({name:'MY',age:'50'});
		this.changeName('MY')
		},
		motheds: {
			...mapMutations(['changeAge','changeAll']),
			...mapActions(['changeName'])
		}
	}
</script>

<style scoped lang="scss">

<style>

• 有一种偏门的办法去修改state的状态
  但是强烈建议不要使用这种方式去访问和修改state的状态值（因为可能会出现意想不到的问题，因为vuex官方并没有介绍可以使用这种方法来改变或者访问state，所以最好不要在项目中使用这种方式，目前仍然是可以实现效果的，但是在vuex版本不断更新后，将来的某个时候有可能无法通过这种方式达到目的，而导致项目出现问题）

this.$store.state.name------可以访问到状态管理的state，可以直接差值写入页面
this.$store.state.name = '某值'------可以更改状态管理的state的值