如何使用 Nuxt.js 从 `plugins` 目录提交突变？

Question

我刚刚遇到这样的问题，我正在尝试自定义 Axios 模块，我的目标是dom.js从“插件”目录访问我的 vuex 模块状态，下面的代码可以工作，但控制台中出现以下错误

不要在突变处理程序之外改变 vuex 存储状态

所以，这个错误的原因我也很清楚，我想知道如何将“plugins”目录中的突变提交到我的dom.jsvuex 模块？谢谢！

//plugins/axios.js
export default function ({ $axios, redirect, store}) {
    $axios.onError(error => {
      const code = parseInt(error.response && error.response.status)
      if (code === 401) {
         store.state.dom.alertIs = true
        redirect('/')
      }
    })
  }

/store/dom.js
export const state = () => ({
    alertIs:false
})

Answer 1

在您的商店中声明一个突变（名为"SET_DOM_ALERT"）：

// store/dom.js
export default {
  state: () => ({
    alertIs: false
  }),
  mutations: {
    SET_DOM_ALERT(state, value) {
      state.alertIs = value
    }
  }
}

然后，store.commit('dom/SET_DOM_ALERT', newValue)在您的插件中使用（注意dom/命名空间的前缀）：

// plugins/axios.js
export default function ({ $axios, redirect, store}) {
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 401) {
      store.commit('dom/SET_DOM_ALERT', true) // 
      redirect('/')
    }
  })
}

演示