在Nuxt.js如何使用Vuex最新教程

在项目开发过程中，遇到vuex报错 Classic mode for store/ is deprecated and will be removed in Nuxt 3. 在nuxt官网查了一下发现是不建议使用这种语法在 nuxtjs 升级到2.4之后，采用旧的 store 配置方式，配置 vuex 将会报错

nuxt中vuex 老版本写法

store-->新建modules文件夹-->city.js

const state = () => ({
  list: ['a', 'b']
})

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

const actions = {
  add: ({commit}, text) => {
    commit('add', text)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在store-->index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'
Vue.use('Vuex')
const store =()=>new Vuex.Store({
  modules:{
    city
  },
  actions:{}
})

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 暴露出来：

// store/index.js
export const state = () => ({
 num: 0
})
  
export const mutations = {
 increment (state) {
  state.num ++
 },
 decrement (state) {
  state.num --
 }
}
  
  
// store/plus.js
export const state = () => ({
 plusNum: 1
})
  
export const mutations = {
 plus (state) {
  state.plusNum ++
 }
}
  
// store/minus.js
export const state = () => ({
 minusNum: 10
})
  
export const mutations = {
 minus (state) {
  state.minusNum --
 }
}
  
// pages/store.vue
<template>
 <section class="container">
  <table>
    <tr>
      <td colspan=4>vuex状态树使用</td>
    </tr>
    <tr>
      <td>页内数据</td>
      <td>index.js</td>
      <td>plus.js</td>
      <td>minus.js</td>
    </tr>
    <tr>
      <td>{{ count }}</td>
      <td>{{ $store.state.num }}</td>
      <td>{{ $store.state.plus.plusNum }}</td>
      <td>{{ $store.state.minus.minusNum }}</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
 </section>
</template>

接着试试mutation的方法

<tr class="mutation-fun">
  <td @click="count ++">count ++</td>
  <td @click="$store.commit('increment')">increment</td>
  <td @click="$store.commit('plus/plus')">plus/plus</td>
  <td @click="$store.commit('minus/minus')">minus/minus</td>
</tr>

自己先小结下这个模块怎么用的吧

nuxt很贴心的帮我们省去了返回Vuex实例的代码，我们可以不用去写了
只有store文件夹下的index.js是一级的vuex状态，其他的js文件都是二级的状态树。（能不能有三级的我不知道，不过感觉没必要，哈哈哈！！）

每个状态树文件都可以包含state，mutation，action

使用二级状态树的state用： $store.state.文件名.变量名

使用二级状态树的mutation用： $store.commit(‘文件名/变量名')

使用二级状态树的action用： $store.dispatch(‘文件名/变量名')

页面中获取变量和调用函数修改变量(mapState, mapMutations, mapActions )

在store文件夹里再新建一个filter.js文件

export const state = ({
  value: 'Hello World',
  list: [1, 2, 3, 4, 5]
});
export const getters = {
  include: (state) => (val) => {
    return state.list.indexOf(val) > -1;
  }
  }
;
export  const mutations = {
  SET_VALUE(state, value) {
    state.value = value;
  }
};
export  const actions = {
   getInfo({state, commit}, val) {
    commit('SET_VALUE', val);
  }
};

在vue文件中使用vuex

<template>
  <section class="p-10">
    <h1> {{ value }} </h1>
    <h1> {{ result }} </h1>
    <el-button type="danger" @click="change">点击</el-button>
  </section>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
  data() {
    return {
      result: false
    };
  },
  computed: {
    ...mapGetters('filter', [
      'include'
    ]),
    ...mapState({
      value: state => state.filter.value
    })
　　// ...mapState('filter',['value'])
  },
  methods: {
// ...mapMutations('模块名',['导出的方法名称']),
    ...mapMutations('filter', [
      'SET_VALUE'
    ]),
    ...mapActions('filter', [
      'getInfo'
    ]),