nuxtjs 在没有名称空间的情况下调用 vuex-mutation答案

【问题标题】：nuxtjs calling vuex-mutation without name spacenuxtjs 在没有名称空间的情况下调用 vuex-mutation
【发布时间】：2019-04-24 21:57:21
【问题描述】：

如何在没有模块文件名称的情况下调用突变？

存储/index.js

export const state = () => ({
    counter: 0
})

商店/todos.js

export const state = () => ({
    list: []
})

export const mutations = {
    add (state, text) {
        state.list.push({
            text: text,
            done: false
        })
    },
    remove (state, { todo }) {
        state.list.splice(state.list.indexOf(todo), 1)
    },
    toggle (state, todo) {
        todo.done = !todo.done
    }
}

在组件中我可以这样称呼突变：

this.$store.commit('todos/add', e.target.value)

但我不想写命名空间。我想使用类似这样的命令：

this.$store.commit('add', e.target.value)

【问题讨论】：

“但我不想写命名空间”...为什么？
@Andrew1325 想象一下，在组件中使用类似“todoModule/add”这样的命名空间几天后，你想将你的 todoModule 移动到新文件夹或者你想更改它的名称。你必须更改任何那么你的组件在哪里！

标签： vuex nuxt.js

【解决方案1】：

您可以通过导出 namespaced 变量来做到这一点

export const namespaced = false

但这不是最好的主意，最好有模块名称以获得更好的模块化

【讨论】：

最好的办法是让模块名称动态化

【解决方案2】：

在相应模块的导出默认函数中将命名空间变量设置为 false namespaced: false。例如

const state = () => ({
  counter: 0
})

const mutations = {
  increment(state) {
    state.counter++
  }
}

const getters = {}

export default {
  namespaced: false,
  state,
  mutations,
  actions,
  getters
}

或将其导出为单独的变量export const namespaced = false;

export const namespaced = false;
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

【讨论】：