vuex管理狀態倉庫詳解

我的名字豌豆發表於2020-07-29
Vue

一.什麼是Vuex？

 Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。採用了全域性單例模式，將元件的共享狀態抽離出來管理，使得元件樹中每一個位置都可以獲取共享的狀態或者觸發行為。
 那麼什麼是狀態呢？我把狀態理解為在沒有使用vuex時，在當前元件中data內需要共用的資料為狀態。
 vuex使得狀態或行為成為了共享的狀態，所共享的狀態或行為可以在各個元件中都可以訪問到，省去了子父或子子之間傳遞變數，提高了開發效率。

二.不使用vuex時與使用vuex時的差別

 當我們不使用vuex時，對於元件之間傳遞資訊會較為麻煩。

不使用vuex時

父子之間傳遞資訊：

App.vue檔案中：

<template>
  <div id="app">
      <Fruits :fruitList="fruitList"/>
  </div>
</template> 
<script>
import Goods from './components/Goods';
export default {
  name: 'App',
  components:{
    Fruits,
    Goods
  },
  data(){
    return{
      goodList:[
      {
        name:'doll',
        price:12
      },
      {
        name:'glass',
        price:10
      }
    ],
    }
  }
}
</script>
<style>
</style>

Good.vue檔案中：

<template>
  <div class="hello">
      <ul>
        <li v-for="(good,index) in goodList" :key="index">
          name:{{good.name}}  number: {{good.number}} {{index}}
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['goodList'],
}
</script>
<style>

</style>

兄弟之間傳遞資訊：

首先先建立一個js檔案作為兩兄弟之間傳輸的鈕釦，這裡起名為msg.js

//建立並暴露vue
import Vue from 'vue';
export default new Vue

兄弟元件Goods：

<template>
  <div>
        <button @click="deliver">點選</button>
  </div>
</template>

<script>
import MSG from '../msg';
export default {
  data(){
    return{
      msg:'hahah'
    }
  },
  methods:{
    deliver() {
        MSG.$emit('showMsg',this.msg)
    }
  }
  
}
</script>
<style>

</style>

兄弟元件Fruits:

<template>
  <div>
      <div class="fruit">
          {{text}}
      </div>
  </div>
</template>
<script>
import MSG from '../msg';
export default {
    data(){
      return{
        text:''
      }
    },
    created(){
      this.getMsg()
    },
    methods:{
      getMsg(){
        MSG.$on('showMsg',(message)=>{
            this.text = message
        })
      }
    }
}
</script>
<style>
</style>

在App元件中的程式碼：
在這裡插入圖片描述
點選按鈕:在這裡插入圖片描述
     在這裡插入圖片描述
 上述為兄弟元件之間的傳值，是不是感覺到有點麻煩呢？初學vue元件傳值時，我也覺得這種方法很麻煩，vuex很好的解決了這個問題，愉快的編寫程式碼。

使用vuex共享狀態資料

store.js中的配置：

import Vue from 'vue';   //引入vue
import Vuex from 'vuex';  //引入vuex

Vue.use(Vuex) //宣告使用Vuex

const state = {
    count:1,
    totalName:'total'
}

const store = new Vuex.Store({
    state
 })
 export default store

App.vue中的配置：

<template>
  <div id="app">
      <Fruits>
      <div>--------------------------</div>
      <Goods>
  </div>
</template> 
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
  name: 'App',
  components:{
    Fruits,
    Goods
  }
}
</script> 

<style>

</style>

Good.vue中的配置

<template>
  <div>
    <div>我是Goods中的元件</div>
     <div>我們共同的數字:{{this.count}}</div>
    <div>我們共同的名字是 {{this.totalName}} </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';  //引入輔助函式
export default {
    computed:{
      ...mapState(['count','totalName'])  //物件展開運算子
    } 
}
</script>
<style>

</style>

Fruits.vue

<template>
  <div>
    <div>我是Fruits中的元件</div>
    <div>我們共同的數字:{{this.count}}</div>
    <div>我們共同的名字是 {{this.totalName}} </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';   //引入輔助函式
export default {
    computed:{
        ...mapState(['count','totalName'])   //物件展開運算子
    }
}
</script>

<style>

</style>

  上述為使用vuex進行簡單的引用狀態資料值的例子，將資料放到state中進行管理，引入輔助函式和將state中的資料引入元件，在元件中進行呼叫，這種方法是不是比不使用vuex更容易了點呢？但是這才只是個非常淺非常淺的開始。下面進入正文！！！

三.vuex的使用

vuex的安裝

 開啟終端，輸入命令列npm install vuex --save進行下載vuex
在這裡插入圖片描述

vuex的核心概念：

  • State：共享狀態，相當於元件中data中的資料，只不過此時變成了全域性變數。
  • Getter：基於state的派生狀態，相當於元件中的computed中的屬性。
  • Mutation：更改vuex中store共享狀態中的方法，通過提交mutation來去修改狀態，進行同步運算元據，通常用於action獲取非同步資料，獲取通過commit提交資料給mutation，在mutation同步操作state中的資料。
  • action：支援非同步操作，可用於非同步獲取請求中的資料,並將獲取的資料同步commit提交給mutation，實現ajax非同步請求資料，mutation將其資料同步到state中。
  • module：為了方便後期對於專案的管理，對於store中的state，mutation，action，getter進行分子模組化管理。

下面我們的介紹將會在Module規範中進行介紹。

Module子模組化管理

對於子模組管理我們需要建立核心化管理物件store起名為index.js將其他state,getter,mutations,actions。引入到該store模組中，並將其暴露Store物件，下面為程式碼部分。

module結構

在這裡插入圖片描述

vuex應用核心管理倉庫store

 下面為store的程式碼，這裡的js我們取名為index.js，通過將state,mutations,actions,getters引入到store中，並暴露出store物件。

/*
    vuex最核心的管理物件store
*/
import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

//宣告使用外掛
Vue.use(Vuex)
//new 一個Vuex的物件,將state,mutation,action,getters配置到vuex的store中,方便管理資料
export default new Vuex.Store({    
    state,
    mutations,
    actions,
    getters,
})

state狀態管理資料

 我們通常將需要進行管理的共享資料，放入state中，使其形似為全域性變數，對於需要的元件進行引入該state狀態資料。下面為state中的程式碼舉例：

/* 
    狀態物件
*/
export default{
    userInfo: {},  //使用者資訊
    count:1
}

mutation-types

 使用常量來代替mutations事件型別是一件很常見的模式，將這些常量放進一個單獨的檔案，可以使你的程式碼合作者對於你的程式碼一目瞭然，增強了程式碼的可閱讀性。下面上程式碼，由於只是例子，所以此時只引入了一個方法。

/* 
    包含n個mutation的type名稱常量
*/
export const RECEIVE_USER_INFO = 'receive_user_info'   //接收使用者資訊

actions的非同步操作

 actions與其mutations類似，但其可以進行非同步操作，且將非同步操作獲取的資料提交給mutations，使得mutations更改state中的狀態資料,這裡常常用於獲取ajax請求中的資料(因為是非同步)，並將其獲取的資料提交給mutations得到state資料狀態的更新。這裡的傳送ajax傳送請求的程式碼，這裡就不進行演示了，大家能夠了解，此時action中的資料是通過傳送ajax請求來獲取的就行。此時也能體現出actions中可以進行非同步操作。下面上程式碼：

/* 
    通過mutation間接更新state的多個方法的物件
*/
import {
    RECEIVE_USER_INFO,      //引入在mutation-types定義的常量
} from './mutation-types';

import {
    reqUserInfo,
} from '../api';      //這裡引入傳送ajax請求的方法

export default{
    // 非同步獲取使用者資訊
    async getUserInfo({commit}){
    //引入傳送請求資料的方法,非同步等待獲取資料，並將其資料賦值給result
        const result = await reqUserInfo() 
        //當獲取資料成功時，result.code會為0，失敗則為1，這裡用於判斷是否獲取狀態資料成功
        if (result.code === 0) {  
            const userInfo = result.data //獲取請求中的資料
            //通過commit將其方法，和請求後獲取的使用者資訊傳遞給mutation
            commit(RECEIVE_USER_INFO,{userInfo})  
        }
    }
}

需要注意的是：在元件中應用下列方式來去呼叫vuex元件中的方法:

this.$store.dispatch('getUserInfo')

mutations同步提交資料

 mutations用於更改state中的狀態邏輯的，且為同步更改state中的狀態資料。需要知道的是在vuex中只能通過mutation來去修改state物件，可以通過獲取actions獲取到的資料去修改state,也可以在mutations模組中直接定義方法來去更改狀態資料。通過mutations和上面的actions模組大家也可以看出commit是用於mutation模組中的。在元件中呼叫其mutation模組的程式碼為：

this.$store.commit('increment')

下面上mutation模組中的程式碼：

/* 
    直接更新state的多個方法的物件
*/

import {
    RECEIVE_USER_INFO,
} from './mutation-types';

export default{
//方法中的第一個預設形參為state,也可以傳入額外的引數，
既mutation的載荷(playload)
    [RECEIVE_USER_INFO](state,{userInfo}){
        state.userInfo = userInfo
    },
    //不通過actions直接在mutation模組中更改state狀態資料
    increment(state){
        state.count = 3
    }
}

Getters對state進行加工

Getters相當於computed計算屬性，用於加工處理state狀態資料，有其兩個預設引數，第一個預設引數為state，第二個預設引數為getters。
在元件中呼叫該方法的程式碼片段為：

this.$store.getters.totalCount()

下面為Getters中的程式碼片段:

/* 
    包含多個基於state的getter計算屬性的物件  
*/
export default{

    plusCount(state){
        return state.count + 1
    },
 //獲取state中狀態資料物件，和獲取getters模組中plusCount資料
    totalCount(state,getters){
        return getters.plusCount + state.count
    }
    
}

那麼對於以上的store我們就簡單介紹完了，相信大家看完後對於vuex會有一定的理解。那麼這個時候我們要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻煩呢？下面我們介紹另一種引入state和getters的方式

輔助函式mapState和mapGetters

 對於上述的引用state和getters的方法是不是感到麻煩呢？使用mapState你將會感受到便利。

//首先我們需要先將輔助函式引入
import { mapGetters,mapState } from 'vuex'

export default {
  computed: {
  // 使用物件展開運算子將 getter 混入 computed 物件中
    ...mapGetters(['plusCount','totalCount',])
  // 使用物件展開運算子將 state 混入 computed 物件中
      ...mapState(['userInfo','count'])
  }
}

以上就是對於vuex的詳解啦，希望能夠幫助到大家對於vuex的理解，感興趣的化就點個讚唄！

相關文章