一次VUEX使用记录

store.js

import Vue from 'vue'
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'  //vuex状态持久化

Vue.use(Vuex);

const state = {
  userName: "",
};
const getters = {
  getUserName(state) {
    return state.userName
  }
}
const mutations = {
  setUserName(state, text) {
    state.userName = text;
  }
};
const actions = {
  setUserNameFun(context, text) {
    context.commit('setUserName', text);
  }
};
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions，
  plugins: [createPersistedState()]
});

export default store;

main.js

import store from "./store"

new Vue({
  el: '#app',
  store,
  router,
  components: {App},
  template: '<App/>'
})

使用：

赋值：

this.$store.dispatch("setUserNameFun", res.data)

取值：

this.$store.getters.getUserName