vuex的使用

之前用vue做过项目，当遇到多个组件间共享数据时，会用到vuex。所以vuex解决了组件之间同一状态的共享问题，那么如何使用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在vuex中用于存储数据

var state={
     count:1
}

6、定义方法

     mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={
      incCount(){
            ++state.count;
       }
 }

7、定义getter

      优点类似计算属性，改变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里面的数据*/
		    }
		} 

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 {               	     
		}
	},
  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}}