Classic mode for store/ is deprecated and will be removed in Nuxt 3.

在 nuxtjs 版本2.4之后,采用 store/index.js返回创建Vuex.Store实例的方法会报错,已经废弃这种配置 vuex 的方式,并且在3.0之后会移除该配置方式。

2.4之后配置方式 模块方式:

store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块(index 是根模块)。
state的值应该始终是function,为了避免返回引用类型,会导致多个实例相互影响。

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

可以拥有 store/todos.js 文件
export const state = () => ({
list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false
    })
  },
  remove (state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

Vuex将如下创建:

new Vuex.Store({
  state: () => ({
    counter: 1
  }),
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        counter:2
      })
    }
  }
})

使用:

this.$store.state.counter //1
this.$store.state.todos.counter //2
Logo

前往低代码交流专区

更多推荐