vue-cli store

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from './assets/js/axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo : {},
    xxx : 0,
  },
  // 只有 mutations 可以更新 state
  // 但 mutations 必须是同步方法，如果是异步使用 actions
  mutations: {
    setUserInfo (state, userInfo) {
      state.userInfo = userInfo;
    },
    setXXX (state, val){
      state.xxx = val;
    },
  },
  actions: {
    // actions 异步获取数据后调用 mutations 更新 state
    updateUserInfo (context) {
      axios.get("/api/getUserInfo")
      .then(res => {
        context.commit('setUserInfo', res.data);
      });
    }
  },
})

main.js

// 别忘了把 store 挂载到 Vue 上
import store from './store'
let app = new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app');

组件中:

// 可以直接使用 state
this.$store.state.xxx
// 可以将 state 变量绑定到计算属性
computed : {
  userInfo () {
    return this.$store.state.userInfo;
  }
},
// 可以使用 mapState 将多个变量绑定到计算属性
import { mapActions, mapState } from 'vuex'
computed : {
  ...mapState([
    'userInfo',
    'xxx'
  ]),
},

// 可以调用 store 的 mutations 更新 state
this.$store.commit('setXXX', 1);
// 可以调用 store 的 actions 更新 state
this.$store.dispatch('updateUserInfo');
// 可以使用 mapActions 将多个 actions 映射到 methods
import { mapActions, mapState } from 'vuex'
methods : {
  ...mapActions([
    'updateUserInfo'
  ]),
},
mounted () {
  this.updateUserInfo();
}