Vuex的使用

使用Vuex

1、安装vuex

npm install vuex --save  或者  cnpm install vuex --save

2、src目录下面新建一个vuex的文件夹
3、vuex 文件夹里面新建一个store.js
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、定义方法
（1）mutations里面放的是方法，方法主要用于改变state里面的数据

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

7、把store暴露出去

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

组件里面使用Vuex

1.引入 store.js

import store from '../vuex/store'

2、注册

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

3、获取state里面的数据

this.$store.state.数据  
譬如获取count数据:this.$store.state.count

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

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