VueJS/nuxt 'state' 应该是一个在 store/store.js 中返回一个对象的方法

Question

我是 VueJS 的新手，对来自 nuxt 的警告感到困惑：

'state' 应该是一个在 store/store.js 中返回一个对象的方法

所以，我的 store.js 包含以下内容（是的，我正在尝试文档中的教程）：

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);
export const store = new Vuex.Store({
  state() {
    return {
      todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
      ]
    };
  }
});

export default store;

状态不是返回对象的方法吗？还是我误解了消息？

更新：

我还尝试了以下方法：

state: () => ({
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
}),

但这会给我同样的警告。

Answer 1

如果你使用 Nuxt，他们希望 astore/index.js创建一个商店，格式应该是这样的：

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

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

在您创建store/store.js文件时，该文件将被视为一个模块，可能无法按您预期的那样工作。我强烈建议创建一个store/index.js并遵循Nuxt的文档。

Answer 2

尝试这个

使用导出常量存储

import Vuex from 'vuex'
import user from './modules/user'

export const store = new Vuex.Store({
  modules: {
    user
  }
})