Vuex 簡介

Getters 配置項

Vuex 的輔助函式

1. mapState 與 mapGetters

2. mapMutations 與 mapActions

Vuex 模塊化 + namespace（命名空間）

總結

Vuex 簡介

1. 概念

在 Vue 中實作集中式狀態（資料）管理的一個 Vue 插件，對 vue 應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間的通信

2. 使用場景

多個組件依賴于同一狀態
來自不同組件的行為需要變更同一狀態

3. Vuex 作業原理

State 是存盤的單一狀態，是存盤的基本資料（把改變的資料給到 Vue Components）

Getters 是 store 的計算屬性，對 state 的加工，是派生出來的資料，就像 computed 計算屬性一樣，getter 回傳的值會根據它的依賴被快取起來，且只有當它的依賴值發生改變才會被重新計算

Actions 像一個裝飾器，提交 mutation，而不是直接變更狀態（actions 可以包含任何異步操作，如果有什么限制判斷條件，也是在 actions 中進行操作）

Mutations 提交更改資料，使用 store.commit 方法更改 state 存盤的狀態（在 Mutations 不做任何判斷等操作，只做資料的處理，如果不需要進行異步處理，可以直接把資料交到這里）

Module 是 store 分割的模塊，每個模塊擁有自己的 state、getters、mutations、actions

Vuex 提供了 mapState、MapGetters、MapActions、mapMutations 等輔助函式給開發在 vm 中處理的 store

這里有一個很好理解 Vuex 的方法：把 Vue Components 當作是去餐廳吃飯的顧客，Actions 就是餐廳的服務員，Mutations 是餐廳的后廚，State 是做好的菜，最后再展現給顧客，所以有什么需求找 Actions 說就可以了，Mutations 只負責做菜

4. 搭建 Vuex 環境

1）打開 VScode 的控制臺，輸入 npm i vuex 進行安裝，也可以通過 Vuex 進行下載安裝

2）創建一個 store 檔案夾，且在該檔案夾中創建一個 index.js 檔案，檔案中引入 import vuex from 'vuex'，通過 Vue.use(Vuex) 就可以使用它了

3）在該 index.js 檔案中配置 store，并配置暴露相關物件 export default new Vuex.Store({})

4）再在 main.js 檔案中引入 store，import store from './store' （這里引入的其實是 store 檔案夾下的 index.js 檔案，因為默認找的就是檔案夾的 index ，所以可以不寫），在 Vue 實體物件中參考，即寫上 store，這樣組件實體物件和 vm 上就都能看到 store 了

下面我們用 vuex 來寫一個案例：（最終的頁面效果如下圖所示）

前面進行選擇每次要加的數，點擊加號可往上加，點擊減號也會對應的減，當當前求和的為奇數時，后一個按鈕才有效，等一等再加，就是延遲 0.5 s 后再加

Count.vue 計算組件代碼（實作頁面的布局和呼叫方法）

<template>
    <!-- 實作頁面的布局 -->
    <div>
        <h1>當前求和為:{{$store.state.sum}}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">當前求和為奇數再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
export default {
    name:'Count',
    data(){
        return {
            n:1,  //用戶選擇的數字
           
        }
    },
    methods: {
        increment(){
            this.$store.commit('ADD',this.n)
            //通過 commit 呼叫 Mutations 里面的 ADD 方法
        },
        decrement(){
          this.$store.commit('DECREASE',this.n)
           //通過 commit 呼叫 Mutations 里面的 DECREASE 方法
        },
        incrementOdd(){
          this.$store.dispatch('addOdd',this.n)
          // 通過 dispatch 呼叫 actions 里面的 addOdd 方法
        },
        incrementWait(){
          this.$store.dispatch('addWait',this.n)
          // 通過 dispatch 呼叫 actions 里面的 addWait 方法
        },
    },
}
</script>

<style lang="css">
    button{
        margin-left: 5px
    }
</style>

組件中讀取 vuex 中的資料：$store.state.sum

組件中修改 vuex 中的資料：$store.dispatch('actions中的方法名'，資料) 或 $store.commit('mutations中的方法名'，資料)

Store 檔案夾中的 index.js 代碼（用 vuex 配置相關的函式或方法）

//該檔案用于創建 Vue 中最核心的 store

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
// 應用 Vuex 插件
Vue.use(Vuex)

//準備 actions 用于回應組件中的動作
const actions = {
    // 實作為奇數的時候才加操作
    addOdd(context,value) {
        if (context.state.sum % 2) {
            context.commit('ADDODD',value)
        }
    },
    // 實作等到 0.5 s 才加的操作
    addWait(context, value) {
        setTimeout(() => {
            context.commit('ADDWAIT',value)
        }, 500);
    }
}
//準備 mutations 用于操作資料（state）
const mutations = {
    //加操作
    ADD(state,value) {
        state.sum += value
    },
    //減操作
    DECREASE(state, value) {
        state.sum -= value
    },
    ADDODD(state, value) {
        state.sum += value
    },
    ADDWAIT(state, value) {
        state.sum += value
    }
}
//準備 state 用于存盤資料
const state = {
    sum: 0  //當前的和
}

//創建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

其中 actions 物件中的每個方法都有一個 context 和 value 形參，context 里面存放著基本你要用的所有資料，value 就是你傳進來的資料

其中 mutations 物件中的每個方法都有 state 和 value 形參，第一個里面存放有 state 中的資料，value 也是傳進來的資料

App.vue

<template>
  <Count />
</template>

<script>
import Count from './components/Count.vue'
export default {
  name: "App",
  components: {
    Count,
  },
}

</script>

main.js

//引入 Vue 
import Vue from 'vue'
//引入 App 
import App from './App.vue'
//引入 store
import store from './store/index.js'
Vue.config.productionTip = false


const vm = new Vue({
  render: h => h(App),
  store,  //使用 store
}).$mount('#app')

案例到這里就結束啦~下面來看看 vuex 中的 getters 配置項

Getters 配置項

getters 使用場景：

如果一個資料需要經過非常復雜的處理后再顯示，那么你可以在 getters 里面進行邏輯運算，記得要有 return 回傳值

使用的時候 $store.getters.函式名

index.js

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
// 應用 Vuex 插件
Vue.use(Vuex)

const state = {
    sum: 0  //當前的和
}

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//創建并暴露 store
export default new Vuex.Store({
    getters
})

Count.vue

<template>
<h1>放大十倍的求和為:{{$store.getters.bigSum}}<h1>
</template>

Vuex 的輔助函式

1. mapState 與 mapGetters

mapState方法：用于幫助我們隱射 state 中的資料為計算屬性

computed:{
  //借助 mapState 生成計算屬性：sum、school、subject（物件寫法）
  ...mapState({sum:'sum',school:'school',subject:'subject'}),

  //借助 mapState 生成計算屬性：sum、school、subject（陣列寫法）
  ...mapState(['sum','school','subject'])
}

mapGetters 方法：用于幫助我們隱射 getters 中的資料為計算屬性

computed:{
  //借助 mapGetters 生成計算屬性：bigSum（物件寫法）
  ...mapGetters({bigSum:'bigSum'}),

  //借助 mapGetters 生成計算屬性：bigSum（陣列寫法）
  ...mapGetters(['bigSum'])
}

總結：

這兩個方法寫在 computed 計算屬性中
在使用前一定要引入 mapState，mapGetters 即： import {mapState,mapGetters} from 'vuex'

2. mapMutations 與 mapActions

mapActions 方法：用于幫助我們生成與 actions 對話的方法，即：包含 $store.dispatch(xxx)函式

methods:{
  //靠 mapActions 生成：incrementOdd、incrementWait (物件形式)
   ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jianWait'})

  //靠 mapActions 生成：incrementOdd、incrementWait (陣列形式)
   ...mapActions(['jiaOdd','jianWait'])
}

mapMutations 方法：用于幫助我們生成與 mutations 對話的方法，即：包含 $store.commit(xxx)的函式

methods:{
  //靠 mapActions 生成：increment、decrement (物件形式)
   ...mapMutations({increment:'JIA',decrement:'JIAN'})

  //靠 mapMutations 生成：JIA、JIAN (資料形式)
   ...mapMutations(['JIA','JIAN'])
}

總結：

這兩個方法寫在 methods 方法中
在使用前一定要引入 mapMutations、mapActions，即：import { mapMutations, mapActions } from "vuex";
mapActions 與 mapMutations 使用時，若需要傳遞引數需要：在模板中系結事件時傳遞好引數，否則引數是事件物件

Vuex 模塊化 + namespace（命名空間）

目的：讓代碼更好維護，讓多種資料分類更加明確

修改 store 中的 index.js 代碼

const countAbout = {
  namespaced:true,  //開啟命名空間
  state:{x:1},
  mutations:{...},
  actions:{ ... },
  getters:{
    bigSum(state){
      return state.sum * 10
  }
 }
}


const personAbout = {
  namespaced:true,  //開啟命名空間
  state:{...},
  mutations:{...},
  actions:{ ... },
}


onst store = new Vuex.Store({
   modules:{
     countAbout,
     personAbout
}
})

① 開啟命名空間后，組件中讀取 state 資料：

//方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：借助 mapState 讀取
...mapState('countAbout',['sum','school','subject'])

② 開啟命名空間后，組件中讀取 getters 資料：

// 方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
// 方式二：借助 mapGetters 讀取
...mapGetters('countAbout',['bigSum'])

③ 開啟命名空間后，組件中呼叫 dispatch

//方式一：自己直接 dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助 mapActions
...mapActiond('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jianWait'})

④ 開啟命名空間后，組件中呼叫 commit

//方式一：自己直接 commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助 mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

總結

Vuex 是通過全域注入 store 物件，來實作組件間的狀態共享，在大型復雜的專案中（多級組件嵌套），需要實作一個組件更改某個資料，多個組件自動獲取更改后的資料進行業務邏輯處理，這時候使用 vuex 比較合適，假如知識多個組件間傳遞資料，使用 vuex 未免有點大材小用，其實只用使用組件間常見的通信方法即可

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382015.html

標籤：其他

上一篇：前端必備技能——輪播圖（原生代碼+插件）

下一篇：手機如何安裝GreasyFork油猴js腳本？

Vue之Vuex的使用

Vuex 簡介

Getters 配置項

Vuex 的輔助函式

1. mapState 與 mapGetters

2. mapMutations 與 mapActions

Vuex 模塊化 + namespace（命名空間）

總結