Nuxt 模块状态

Posted 2023-02-22

【中文标题】Nuxt 模块状态

【英文标题】：Nuxt modules state

【发布时间】：2019-09-22 16:44:30

【问题描述】：

我有一个带有模块状态的 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 中删除模块时，我拥有一切之一，但是，一切都是未定义的。

存储输出示例：

【参考方案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) ...