使用Vuex之前我們需要先來(lái)了解一下 什么是 Vuex？ 為什么要使用 Vuex？

先來(lái)看一下官方文檔怎么解釋

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

簡(jiǎn)單來(lái)講呢 Vuex 就是一種公共的狀態(tài)管理器，可以管理所有組件的狀態(tài)。

我們知道 Vue 是單向數(shù)據(jù)流驅(qū)動(dòng)模式，而當(dāng)我們?cè)诖笮晚?xiàng)目實(shí)際開(kāi)發(fā)中遇到 多個(gè)組件需要共享或更改一個(gè)狀態(tài)時(shí)，通過(guò)原來(lái)的傳參方式在復(fù)雜的組件嵌套中或者兄弟組件中就顯得尤其麻煩，而使用 Vuex 就非常簡(jiǎn)單。

先來(lái)看一下官方文檔提供的這張圖

Vuex核心

使用之前需要先安裝 Vuex

npm install vuex --save

在 src 目錄下創(chuàng)建 store 目錄，在 store 目錄下創(chuàng)建 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //使用 vuex 插件

export default new Vuex.Store({

})

然后還要在入口文件 main.js 中進(jìn)行導(dǎo)入并注冊(cè)

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

這樣的話(huà)就可以在組件中使用 Vuex 了

如在組件中使用 state 中的數(shù)據(jù)

// 組件中
this.$store.state.isLogin  //獲取 state 中定義的 isLogin

// store/index.js
  // 定義狀態(tài)
    state: {
        isLogin: false
    },

與之對(duì)應(yīng)的輔助函數(shù)寫(xiě)法 mapState

// 組件中引入 mapState
import {mapState} from "vuex"

// mapState 必須將數(shù)據(jù)映射到 computed 身上
 computed:{
      ...mapState(["屬性名稱(chēng)"])    // 數(shù)組方式
      ...mapState({key:state=>state.屬性})  // 對(duì)象形式
      }
      
// 使用時(shí)
this.屬性名稱(chēng)

如在組件中使用 getters 獲取 state 中的狀態(tài)

// 組件中
this.$store.getters.方法名 
// store/index.js
getters: {
        方法名(state) {
            return state.xxx;
        }
    },

與之對(duì)應(yīng)的輔助函數(shù)寫(xiě)法 mapGetters

// 組件中引入 mapGetters 
import {mapGetters} from "vuex"

// mapGetters 必須將數(shù)據(jù)映射到 computed 身上
computed:{
     ...mapGetters(["方法名稱(chēng)"])    // 數(shù)組方式
     ...mapGetters({key:方法名稱(chēng)})  // 對(duì)象形式
     }
   
// 使用時(shí)
this.方法名稱(chēng)

如在組件中調(diào)用 actions 中定義的方法

// 組件中
this.$store.dispatch("方法名", 傳遞參數(shù));
 
// store/index.js
 actions: {
     方法名: ({commit}, 傳遞參數(shù)) => {
        //通過(guò) commit 提交觸發(fā) mutation 中的方法 
        commit('mutatuon 中方法名', username)
        },
    },

與之對(duì)應(yīng)的輔助函數(shù)寫(xiě)法 mapActions

// 組件中引入 mapActions 
import {mapActions} from "vuex"

// mapActions 必須將數(shù)據(jù)映射到 methods 身上
methods:{
      ...mapActions(["方法名稱(chēng)"])    // 數(shù)組方式
      ...mapActions({key:方法名稱(chēng)})  // 對(duì)象形式
     }
  
// 使用時(shí)
this.方法名稱(chēng)

如在組件中調(diào)用 mutations 的方法來(lái)修改狀態(tài)

// 組件中
this.$store.commit('方法名', 傳遞參數(shù));

// store/index.js
    mutations: {
        方法名(state, 接收參數(shù)) {
            // state 默認(rèn)參數(shù) 
            state.xxx = 接收參數(shù);
        }
    },

與之對(duì)應(yīng)的輔助函數(shù)寫(xiě)法 mapMutations

// 組件中引入 mapMutations 
import {mapMutations} from "vuex"

// mapMutations 必須將數(shù)據(jù)映射到 methods 身上
methods:{
      ...mapMutations(["方法名稱(chēng)"])    // 數(shù)組方式
      ...mapMutations({key:方法名稱(chēng)})  // 對(duì)象形式
      }
      
// 使用時(shí)
this.方法名稱(chēng)

Vuex 本地持久化

當(dāng)我們刷新頁(yè)面時(shí),項(xiàng)目會(huì)重新加載, vuex 會(huì)重置,我們所有的狀態(tài)都會(huì)回到初始狀態(tài),而有時(shí)這是我們不想看到的,使用 vuex-persistedstate 可以避免這種情況

首先需要安裝 vuex-persistedstate

npm install --save vuex-persistedstate

需要在 store 目錄下 index.js 中進(jìn)行配置一下

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // 加上這句配置就能實(shí)現(xiàn)持久化,但是默認(rèn)是把 satae 中的所有狀態(tài)都進(jìn)行了持久化 
  plugins: [createPersistedState()]
  
  // 如果只想讓某一個(gè)狀態(tài)進(jìn)行持久化,可以按照下面來(lái)進(jìn)行配置
   plugins: [createPersistedState({
    reducer(val){
      return{
        // 只存儲(chǔ) state 中的 city
        city:val.city
      }
    }
  })],
});

更多詳情 請(qǐng)參考：Vuex 官方文檔

ok,以上就是我個(gè)人對(duì) Vuex 的一些基本用法的總結(jié)。謝謝觀看。