Nuxt项目中如何创建可被其他store共享复用的全局公共store？

实现思路 #

将公共store逻辑抽为独立配置，通过对象合并注入到各业务store中，避免重复编码。

步骤1：创建公共基础store #

新建store/base.js存放通用逻辑：

// store/base.js
export const state = () => ({
  list: []
})

export const mutations = {
  add(state, data) {
    state.list.push(data)
  }
}

如果有通用的actions、getters也可以在该文件中定义。

步骤2：合并公共配置到业务store #

以users store为例，改造store/users.js：

// 导入公共配置，也可以用require语法导入
import { state as baseState, mutations as baseMutations } from './base'

export const state = () => ({
  // 合并公共state
  ...baseState(),
  // 业务自有state
  name: null,
  mail: null
})

export const mutations = {
  // 合并公共mutations
  ...baseMutations,
  // 业务自有mutations
  edit(state, data) {
    state.name = data.name
    state.mail = data.mail
  }
}

同理改造store/posts.js：

import { state as baseState, mutations as baseMutations } from './base'

export const state = () => ({
  ...baseState(),
  title: null,
  content: null
})

export const mutations = {
  ...baseMutations,
  edit(state, data) {
    state.title = data.title
    state.content = data.content
  }
}

说明 #

• 合并时如果业务store和公共store存在同名的mutation/action/getter，业务侧的配置会覆盖公共配置
• 后续公共逻辑迭代仅需修改store/base.js，所有引用该配置的业务store会自动同步更新
• 最终生成的store结构和预期的改造后代码完全一致，无需手动重复编写公共逻辑

内容的提问来源于stack exchange，提问作者Michel Gisenaël