如何在 VUEX 状态下动态更新 API 路径

Question

我正在尝试在我的 Vuex 状态下动态更新 API 路径。 Vuex 必须在页面加载时设置默认路径“example.com/api/datasetA.json”，我想通过用户交互将路径更新为“example.com/api/datasetB.json”并获取新 API立即获取数据。

我的代码相关部分如下（更新代码）：

VUEX：

export const state = () => ({
  apiData: [],
  apiId: 'datasetA.json'
});

export const mutations = {
  fillApiData: (state, data) => {state.apiData = data},
  updateApi: (state, newApiId) => {state.apiId = newApiId;}
};

export const actions = {
  async getApiData({commit, state}) {
    const response = await this.$axios.$get('https://example/api/'+state.apiId);
    commit('fillApiData', response); 

然后VUE方法如下：

methods: {

   updateApi(apiId) {
    
      this.$store.commit('updateApi', apiId)
      }

Answer 1

创建一个改变 vuex 状态的突变。然后在getApiData函数中运行这个mutation(commit)

export const state = () => ({
  apiData: [],
  apiId: 'datasetA.json'
});

export const mutations = {
  updateAPI(state, newApiId ) {
    state.apiId = newApiId;
  }
};

export const actions = {
  async getApiData({commit, state}) {
    const response = await this.$axios.$get('https://example/api/'+state.apiId);
    commit('updateValue', response);
    commit('updateAPI', 'some.new.datasetB.json');
  }
}

我可以通过在方法中使用 this.$store.state.apiId = apiId 直接更新状态，但我知道这是不好的做法

你是对的。但是，如果您希望这种方法在 Vuex 之外更新状态，您可以使用突变来更改 Vuex - 这是一个很好的做法。

那你就可以了

this.$store.commit('updateAPI', 'my new value')