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

Question

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

'state' should be a method that returns an object in 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 不是一个返回对象的方法吗？还是我误解了消息？

更新:

我还尝试了以下方法:

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

但这会给我同样的警告。

Answer 1

如果您使用的是 Nuxt，他们需要一个 store/index.js 来创建一个商店，格式应该是这样的:

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

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

当您创建一个 store/store.js 文件时，它将被视为一个模块并且可能无法按您预期的那样工作。我强烈建议创建一个 store/index.js 并按照 Nuxt 中的文档进行操作.