vuex的用法

vuex的用法

1. 安装Vuex，npm install vuex --save 或 cnpm install vuex --save进行安装

2. 在项目里面src下新建vuex文件夹，文件夹里面新建一个store.js

3. 在store.js中写入

   import Vue from 'vue' ; //引入Vue
   import Vuex from 'vuex';//引入vuex
   Vue.use (Vuex); //使用vuex
   var state = {  //state中存储数据
       count：1；
   } 
   var mutations = {  //mutations中存放方法
       countAdd(){
           ++state.count;
       }
   }
   const store = new Vuex.Store（{  //Vuex实例化
       state，
       metations：mutations
   }）
   
   export default store；  //暴露出去
   

4. 在组件中使用vuex

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

5. 一个完整的module 需要包括四个部分state,getters actions mutations,state来存放需要操作的状态；gettes类似于计算属性，改变数据有只能通过提交到mutations方式，一种是异步的，定义在actions然后提交到mutation,通过dispach来分发，另外一种是同步的直接通过commit来触发