Nuxt 模块状态

Question

我有一个带有模块状态的 nuxt 应用程序：

• 商店
  • index.js、state.js、mutations.js、actions.js、getters.js
  • 模块
    • 帖子
    • index.js、state.js、mutations.js、actions.js、getters.js

在 Store/index.js 我有：

import state from './state'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'

import posts from './modules/posts'

export default {
  state,
  getters,
  mutations,
  actions,
  modules: {
    posts
  }
}

在 Store/state.js 我有：

export default () => ({
  test: null
})

在 Store/Modules/Posts/index.js 我有：

import state from './state'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'

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

在 Store/Modules/Posts/state.js 我有：

export default () => ({
  dialog: false,
  test: false
})

我的商店现在已经复制了 getter、action 等所有内容。 是不是应该这样？我是否应该或不应该如何使用商店？ 当我从基础 inldex.js 中删除模块时，我拥有一切之一，但是，一切都是未定义的。

存储输出示例：

Answer 1

您根本不需要“模块”文件夹。 Nuxt 足够聪明，可以将您的商店从文件和目录结构中拼凑起来。所以，你的例子可能是这样的：

• 目录：商店
  • state.js、mutations.js、actions.js、getters.js
  • 目录：帖子
    • state.js、mutations.js、actions.js、getters.js

请注意，您也不需要 index.js 文件！事实上，如果你的 store 没有特定的 root 状态，那么就不需要 store 目录下的文件。

文档对每个文件的内容有点模糊。这是一个快速指南：

state.js
export default () => ({
  field1: 'init value',
  field2: 'init value'
})

mutations.js
export function mutation1(state, payload) {...}
export function mutation2(state, payload) {...}

getters.js
export getter1(state, getters, rootState, rootGetters) {...}
export getter2(state, getters, rootState, rootGetters) {...}

actions.js
export action1(context, payload) {...}
export action2(context, payload) {...}