如何從 vuex 中的不同存儲模塊訪問存儲 state？

Question

編輯：我發現解決方案只是在我的 vue 模塊中將令牌作為參數傳遞給 mounted() function：

mounted(){
    this.$store.dispatch("fetchData", this.$store.state.auth.user.token)

在商店中，我像這樣使用我的異步 function：

async fetchData({commit}, id)

我想從我的商店進行 API 調用，但我也有存儲在同一個地方的那些 API 調用所需的用戶信息（userId，jwttoken）。

這是我的商店：

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import auth from "./modules/auth";
import prod from "./modules/prod";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    prod
  },
  plugins: [createPersistedState()],
});

這是我在商店中的身份驗證模塊：

import axios from "axios";
const state = {
  user: null,
};
const getters = {
  isAuthenticated: (state) => !!state.user,
  StateUser: (state) => state.user,
};
const actions = {
  async Register({ dispatch }, form) {
    await axios.post("user/signup", form);
    await dispatch("LogIn", form);
  },

  async LogIn({ commit }, User) {
    const response = await axios.post("user/login", User);
    console.log(response)
    await commit("setUser", response.data);
  },

  async LogOut({ commit }) {
    let user = null;
    commit("logout", user);
  },
};
const mutations = {
  setUser(state, user) {
    state.user = user;
  },
  logout(state) {
    state.user = null;
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

這就是我想在不同的存儲文件中調用它的地方，使用 this.$store.state.auth.user.token 行來獲取 API 調用所需的令牌：

//store/modules/prod.js

import axios from "axios";
const state = {
    products: null,
};

const actions = {
  async fetchData({commit}) {
    const headers = {
        authorization: "Bearer " + this.$store.state.auth.user.token,
    };
    let resp = await axios.get("product", {
      headers
    });
    await commit("SET_PRODUCTS", resp.data)
  }

};
const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products
  }
};

export default {
  state,
  actions,
  mutations,
};

我在這樣的組件中調用它：

    products(){
      return this.$store.state.products
    }
   },
   mounted(){
    this.$store.dispatch("fetchData")

但是，來自存儲的請求永遠不會發送到 API，因為它無法讀取令牌。 我得到“無法讀取未定義（讀取狀態）

我也嘗試過像這樣導入它，但它說令牌未定義：

import auth from "../modules/auth"

    const headers = {
        authorization: "Bearer " + auth.user.token,
};

我在網上讀到你應該通過 Getters 從非 vue 模塊訪問商店，但我也無法讓它工作，這是否是 go 的正確方法？

Answer 1

Actions 將上下文 object 作為參數，您可以使用它來訪問 rootState。 檢查文檔以獲取其他可用選項。 https://vuex.vuejs.org/api/#actions

const actions = {
  async fetchData({commit, rootState}) {
    const headers = {
        authorization: "Bearer " + rootState.auth.user.token,
    };
    let resp = await axios.get("product", {
      headers
    });
    await commit("SET_PRODUCTS", resp.data)
  }

};