Vuex 的简单封装和使用

• main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

// 生产环境中，阻止警告语句的生成，默认为 true
Vue.config.productionTip = false;

window.vm = new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");

• store/index.js

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";

Vue.use(Vuex);

// modules 里根据项目需要会包含多个模块
export default new Vuex.Store({
  modules: {
    user,
  },
});

• store/modules/user.js

// request 是对 axios 的封装
import request from "../../axios/request.js";

// getters、mutations、actions 都必须为复数
const state = {
  user: null,
};
const getters = {};
const mutations = {
  setUser(state, payload) {
    state.user = payload;
  },
};
const actions = {
  authLogin(context, products) {
    return new Promise((resolved, rejected) => {
      request("/login", "POST", this.user)
        .then((res) => {
          context.commit("setUser", products);
          resolved(res);
        })
        .catch((err) => {
          rejected(err);
        });
    });
  },
};
export default { state, getters, mutations, actions };

• view/Login.vue

<script>
    import { mapActions } from "vuex"
    export default {
        methods:{
            /** 将 actions 中的方法映射到该组件中，
            修改数据时都通过 actions 中的方法（dispath），
            然后 actions 方法内部会调用 mutations 中的方法（commit）。**/
            ...mapActions(['authLogin'])
        }
    }
</script>