21.Vuex状态管理

1.Vuex的简单理解

Vuex => 状态管理模式 => 解决组件之间同一状态的共享问题

不同组件的行为需要变更同一状态

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

组件通讯 => 共享数据更新 => 数据共享，数据持久化

适用范围： 大项目

2.Vuex的设计原理

3.Vuex的使用

（1）src目录下面新建一个vuex的文件夹

（2）vuex 文件夹里面新建一个store.js

（3）安装vuex

cnpm install vuex --save

(4) 在刚才创建的store.js引入vue 引入vuex 并且use vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

(5) 定义数据

/*1.state在vuex中用于存储数据*/
var state={

    count:1
}

(6) 定义方法

/*mutations里面放的是方法，方法主要用于改变state里面的数据*/
var mutations={

    incCount(){
		++state.count;
    }
}

(7) 优点类似计算属性

/*改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/
var getters= {
   
    computedCount: (state) => {
	return state.count*2
    }
}

(8) Action 基本没有用
Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

var actions= {
    incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
      
      
	context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/


    }
}

(7) 暴露

const store = new Vuex.Store({
   state,
   mutations,
   getters,
   actions
})
	
export default store;

3.组件里面使用Vuex

(1) 引入store

 import store from '../vuex/store.js';

(2) 注册

 export default{
	data(){
	    return {               
	       msg:'我是一个home组件',
		   value1: null,
	     
	    }
	},
	store,
	methods:{
	    incCount(){
	      
		this.$store.commit('incCount');   /*触发 state里面的数据*/
	    }

	}
}

(3) 获取state里面的数据

this.$store.state.数据

(4) 触发 mutations 改变 state里面的数据

this.$store.commit('incCount');

(5) 触发 actions里面的方法

this.$store.dispatch('incCount');

(6) 获取 getters里面方法返回的的数据

{{this.$store.getters.computedCount}}