vue-cli中vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
1.vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享）
2.组件里面数据的持久化。
3.小项目不部建议用vuex
一、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、state中定义数据，state在vuex中用于存储数据

		var state={
		    count:1
		}

6、在mutations里面定义方法，
方法主要用于改变state里面的数据

		var mutations={
		    incCount(){
			++state.count;
		    }
 //若方法需要传值则第一个参数必须传入state，第二个参数就是要传入的数据
		}

7、getters有点类似计算属性 ，
即改变state里面的数据的时候会触发 getters里面的方法 从而获取新的值 (基本用不到)

		var getters= {
		    computedCount: (state) => {
			return state.count*2
		    }
		}

8、Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

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

9、暴露store

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

二、组建里面使用vuex：
1.引入 store
import store from '../vuex/store.js';
2、注册

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

3、获取state里面的数据
this.$store.state.数据
4、触发 mutations 里面的方法改变 state里面的数据

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

5、触发 actions里面的方法

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

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

                   this.$store.getters.computedCount