如何在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 函数中的这个突变（提交）

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');
  }
}

I can update the state directly by using this.$store.state.apiId = apiId in methods but I know this is bad practice

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

那你可以做

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

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

How to update API path dynamically in VUEX state

vue.js

vuex

nuxt.js