简介
在项目开发过程中，遇到vuex报错
Classic mode for store/ is deprecated and will be removed in Nuxt 3.
在nuxt官网查了一下发现是不建议使用这种语法
在 nuxtjs 升级到2.4之后，采用旧的 store 配置方式，配置 vuex 将会报错
nuxt中vuex 老版本写法
import Vue from 'vue'
import Vuex from 'vuex'
import geo from './modules/geo'
import home from './modules/home'
Vue.use(Vuex)
const store = () => new Vuex.Store({
modules: {
geo,
home
},
actions: {
async nuxtServerInit({
commit
}, {
req, app}) {
const {
status,
data: {
province,
city
}
} = await app.$axios.get('/geo/getPosition')
commit('geo/setPosition',status===200?{
city,province}:{
city:'',province:''})
const {
status:status2,data:{
menu}}=await app.$axios.get('geo/menu')
commit('home/setMenu',status2===200?menu:[])
const {
status:status3,data:{
result}}=await app.$axios.get('/search/hotPlace',{
params:{
city:app.store.state.geo.position.city.replace('市','')
}`在这里插入代码片`
})
commit('home/setHotPlace',status3===200?result:[])
}
}
})
export default store
新版本用法
Nuxt.js 支持两种使用 store 的方式，你可以择一使用：
普通方式： store/index.js 返回一个 Vuex.Store 实例
模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）
普通方式
使用普通方式的状态树，需要添加 store/index.js 文件，并对外暴露一个 Vuex.Store 实例：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count + 100
}
}
})
export default store
普通方式在组件中使用
<template>
<button @click="$store.commit('increment')">{
{ $store.state.count }}</button>
</template>
模块方式
状态树还可以拆分成为模块，store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块
使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，
而应该直接将 state、mutations 和 actions 暴露出来：
export const state = () => ({
count: 0
})
export const mutations = {
increment (state) {
state.count++
}
}
其他的模块文件也需要采用类似的方式，如 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
}
}
在页面中使用 如下所示
<template>
<ul>
<li v-for="todo in todos">
<input type="checkbox" :checked="todo.done" @change="toggle(todo)">
<span :class="{ done: todo.done }">{
{
todo.text }}</span>
</li>
<li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
</ul>
</template>
<script>
import {
mapMutations } from 'vuex'
export default {
computed: {
todos () {
return this.$store.state.todos.list }
},
methods: {
addTodo (e) {
this.$store.commit('todos/add', e.target.value)
e.target.value = ''
},
...mapMutations({
toggle: 'todos/toggle'
})
}
}
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
模块方法顶级定义
需要创建一个文件store/state.js并添加以下内容
export default () => ({
counter: 0
})
并且相应的 mutations 在文件 store/mutations.js 中
export default {
increment (state) {
state.counter++
}
}
模块文件
您可以将模块文件分解为单独的文件：state.js,actions.js,mutations.js和getters.js。
如果您使用index.js来维护state,getters,actions和mutations，同时具有单个单独的操作文件，
那么仍然可以正确识别该文件
项目结构
vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
1、应用层级的状态应该集中到单个 store 对象中。
2、提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3、异步逻辑都应该封装到 action 里面。
只要你遵守以上规则，如何组织代码随你便。
如果 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
谢谢观看，如有不足，敬请指教