Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
可以实现组件间的通讯等一系列的功能

Vuex的基本使用

· 在使用vue create 创建了脚手架后，找到main.js文件进行配置

import Vue from 'vue'
import App from '/App.vue'
import Vuex from 'vuex'   //引入vuex

Vue.config.productionTip  //使浏览器不在控制台中显示提示

Vue.use(vuex)     //使用了vuex中install方法

const store = new Vuex.Store({})  //通过构造函数创建一个实例对象

new Vue({
    render:h=>h(App),
    store  //es6写法  相当于 store:store
})

到这里Vuex的基本配置就完成了

vue中-state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

首先是定义一个state，在刚才的定义的store中配置

const store = new Vuex.Store({
    state：{
         num:0
     }
})

方法一、然后如果要在其他组件中使用
{{$vuex.state.name}}

方法二、或者是使用计算属性
先引入vuex的自带方法
import { mapState } from 'vuex'

再在computed中配置

computed:{
    ...mapState(['name'])
}

vuex-mutations

这里以一个简单的例子（是state中num加指定值）演示

首先同样的在store中进行配置

const store = new Vuex.Store({
    state:{
        num:0
    }，
    mutation:{
        addNum(state,payload){
            state.num +=payload
        }            //state直接就是指向store中的state的，类似this.store.state，而payload即传入的参数
    }
})

方法一：直接使用 this.$store.commit('addNum')调用

方法二：现在相应组件内引用方法
import { mapMutations } from 'vuex'
再在method中定义

methods: {
    ...mapmutations['addNum']
 }

vue中-actions

主要负责一些异步的操作，例如请求数据等

首先一样要在store中定义

const store = new Vuex.Store({
    state:{
        num:0
    }，
    mutation:{
        addNum(state,payload){
            state.num +=payload
        }
    },
    actions:{                   //这里用计时器代替请求数据
        getStates(store,payload){      //表示的类似于this.$store
            setTimeout(function(){
                store.commit('addNum',payload)
            },1000)
        }
    }
})

之后便是调用
方法一: this.$store.dispatch('getStates',123) 方法二： import { mapActions } from 'vuex'\

methods: {
    ...mapActions['getStatus']
 }

例子中的main.js的完全代码如下

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store( {
  state: {
  // 管理数据
  count: 0},
  mutations:{
    addCount(state,payload){
      state.count +=payload
    }
  },
  actions:{                   //这里用计时器代替请求数据
    getStates(store,payload){      //表示的类似于this.$store
        setTimeout(function(){
            store.commit('addCount',payload)
        },1000)
    }
}
})
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

最后，写的不好还请多多担待。