Vuex Moduleモジュール化使用

単一のステータスツリーを使用すると、適用されるすべてのステータスが比較的大きなオブジェクトに集中します.アプリケーションが非常に複雑になると、storeオブジェクトはかなり肥大化する可能性があります.
以上の問題を解決するために、Vuexではstoreをモジュールに分割できます.各モジュールには、独自のstate、mutation、action、getter、さらにはネストされたサブモジュールがあります.

src
 ├── store
 │   ├── modules
 │   │   ├── user.js
 │   │   └── login.js
 │   ├── getters.js
 │   └── index.js
 └── main.js

main.jsはstore import store from「./store」を使用します.

/*
 * Copyright © 2020 LiuDanYang. All rights Reserved.
 */

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

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  store,
  render: (h) => h(App),
});

 index.js

/*
 * Copyright © 2020 LiuDanYang. All rights Reserved.
 */

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";

import user from './modules/user';
import login from './modules/login';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user,
    login,
  },
  getters,
});

export default store;

getters.js

/*
 * Copyright © 2020 LiuDanYang. All rights Reserved.
 */

const getters = {
  users: (state) => state.user.users,
  token: (state) => state.login.token,
};
export default getters;

user.js(例で使用するインタフェースはプロジェクトの実際の状況に応じて使用してください)

/*
 * Copyright © 2020 LiuDanYang. All rights Reserved.
 */

import { getUserInfo } from "@i/user";

const state = {
  users: {},
};

const mutations = {
  SET_USERS: (state, data) => {
    state.users = data;
  },
};

const actions = {
  /**
   *       
   * @param commit
   * @returns {Promise}
   */
  getUserInfo({ commit }) {
    return new Promise((resolve, reject) => {
      getUserInfo().then((res) => {
        const { status, data } = res;
        if (status === "1") {
          commit("SET_USERS", data);
          resolve(data);
        } else {
          reject(res);
        }
      });
    });
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

login.js(例で使用するインタフェースはプロジェクトの実際の状況に応じて使用してください)

/*
 * Copyright © 2020 LiuDanYang. All rights Reserved.
 */

import { getLogin } from "@i/user";
import { getToken, setToken } from "@u/auth";

const state = {
  token: getToken(),
};

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
};

const actions = {
  /**
   *     
   * @param commit
   * @param data
   * @returns {Promise}
   */
  getLogin({ commit }, data) {
    const { username, password} = data;
    return new Promise((resolve, reject) => {
      getLogin({
        phonenumber: username.trim(),
        password: password,
      })
        .then((res) => {
          const { status, data } = res;
          if (status === "1") {
            commit("SET_TOKEN", data.token);
            setToken(data.token);
            resolve(res);
          } else {
            reject(res);
          }
        })
        .catch((res) => {
          reject(res);
        });
 
    });
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

ページ使用例

import { mapGetters } from "vuex";

export default {
  components: {},
  computed: {
    ...mapGetters(["users"]),
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
      this.$store.dispatch("user/getUserInfo");
    }
  },
};