Vuex初学一

什么是vuex

于vuex是一种前端的数据库，用于对数据的统一管理，可以理解为前端的一套数据API。在实际的项目会存在不同的页面操作统一数据源，虽然使用 父子节点传值的方式能够 实现，但是过程十分的臃肿，难以维护。使用vuex则将这一系列的繁琐操作交给了vuex。

vuex的入门使用

简单介绍Vuex的使用：

1. src目录下面新建一个vuex的文件夹；

2. vuex 文件夹里面新建一个store.js（当然也可也是其他文件名，不纠结）；

3. 安装vuex：
   cnpm install vuex --save（国内用cnpm快点）

4. 在刚才创建的store.js引入vue 引入vuex 并且use vuex（正式开始引入vuex组件）

   	import Vue from 'vue'
   	import Vuex from 'vuex'
   	Vue.use(Vuex)
   

5. 定义数据：
   数据初始值：1

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

6. 定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据：
   将数据累加一

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

7. 暴露数据结构，以便其他组件能够随时调用（简单使用）:

   const store = new Vuex.Store({
       state, //数据结构
       mutations //用于改变数据的函数
   })
   export default store;
   

组建里面使用vuex：

以单组件的方式进行简单使用

1.引入 store(在使用的组件中):

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

2. 注册；

     export default{
    	data(){
    	    return {               
    	       msg:'我是一个home组件',
    		value1: null,
    	    }
    	},
    	store, //在此引入‘store ’组件
    	methods:{
    	    incCount(){
    	    //调用‘store ’组件的方法实现递增
    		this.$store.commit('incCount');   /*触发 state里面的数据*/
    	    }
    	}
      }
   

3. 获取state里面的数据。

   //'count'为数据名称
   this.$store.state.count
   

注：简单入门级使用