1、安装

npm install vuex --save

2、简单示例

（1）src/vuex/store.js中写入以下代码：

// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 使用vuexVue.use(Vuex)// 1、state：创建初始化状态const state = {
    // 放置初始状态
    count: 1}// 2、mutations：创建改变状态的方法const mutations = {
    // 状态变更函数-一般大写
    ADD (state, n) {
        state.count += n;
    }}// 3、getters：提供外部获取stateconst getters = {
    count: function(state){
        return state.count;
    }}// 4、actions：创建驱动方法改变mutationsconst actions ={
    // 触发mutations中相应的方法-一般小写
    add ({commit}, data) {
        commit('ADD', data)
    }}// 5、全部注入Store中const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions});// 6、输出storeexport default store;

代码说明：

  • state - mutations - getters - actions - store，以上写法基本固定。

  • 小型项目用上面的简单管理状态即可。

（2）src/main.js代码中

import Vue from 'vue'import App from './App'import router from './router'// 引入storeimport store from './vuex/store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: '#app',
  router,
  store, // 全局注入
  components: { App },
  template: ''})

（3）src/compontent/Count.vue页面组件中代码如下：