在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'
    ]),