VUE-7:VUEX

爲什麼要用 vuex ?

        首先,需要清楚爲什麼要用 vuex ,當我們的應用遇到 **多個組件共享狀態** 時

                - 多層級父子組件狀態傳遞會特別繁瑣

                - 非嵌套父子組件狀態傳遞也會特別繁瑣


vuex

        Vuex 是一個專爲 Vue.js 應用程序開發的 **狀態管理模式**,類似 redux


這種狀態管理模式包含:

        這種模式遵循的是 單向數據流 模式


vuex 的工作流

Actions和Mutations可以說成是一個差不多的


安裝 vuex

        npm i vuex

            // or

        yarn add vuex


引入 vuex

        通過 `import` 引入

                    通過 `import` 方式引入,需要手動安裝(手動調用 `Vue.use(Vuex)`)

        通過 \<script\> 引入

                    通過 \<script\> 方式引入,vuex 會自動安裝(也就是主動調用 `Vue.use(Vuex)`)


從 Store 開始

        `Store`  就是倉庫,我們前面提到的 `state` 就存儲在 `store` 中,同時提交動作、修改狀態的方法也都由 `store` 提供和管理

創建一個 Store

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({

    state: {},

    getters: {},

    mutations: {},

    actions: {}

})

            必須在 `Vue.use(Vuex)` 之後創建 `store`

核心概念

        - state

        - getters

        - actions

        - mutations

 

state

state 的創建

        存儲應用狀態數據的對象,`state` 的值可以是一個對象,也可以是一個返回對象的函數,類似 vue 中組件的 `data` ,使用函數的方式

        返回對象可以避免對象引用導致的副作用問題

        通過 `store.state` 訪問狀態數據

         `state` 數據與組件 `data` 一樣是被追蹤的

在組件中使用 store

    問題: `state` 的更新並不會更新視圖

解決

        用computed(計算屬性)

computed計算屬性

<template>

  <div class="home">

    <h2>{{title}}</h2>

    <div>{{content}}</div>

  </div>

</template>

<script>

import store from '@/stores'

export default {

  name: 'home',

  computed: {

    title() {

      return store.state.title

    },

    content() {

      return store.state.content

    }

  }

}

</script>

 

store 配置

        如果每個組件在使用 `store` 的時候都 `import` 會比較繁瑣,這個時候,我們通過 vuex 提供的 `store` 選項把 `store` 對象注入

        到 vue 的原型上

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from '@/stores'

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

            配置注入後,我們就可以在組件實例中使用 `this.$store` 來訪問 `store` 對象了

使用輔助函數 `mapState`

        當一個組件需要獲取多個狀態時候,將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題,我們可以使用 `mapState` 

        輔助函數幫助我們生成計算屬性,讓你少按幾次鍵,通常我們把 `store` 的 `state` 通過 `mapState` 函數映射到組件的 `computed` 上

通過對象方式進行映射

        場景:當組件中已有與 `store` 同名的數據名稱

使用擴展運算符組合

        通過對象擴展運算符,可以把 `mapState` 返回的 `state` 屬性與組件已有計算屬性進行融合


getters

        有時候我們需要從 store 中的 state 中派生出一些狀態,類似組件的 `data` 與 `computed`,`store` 也提供了一個 `getters` 對象來處理

        派生數據

getters 函數

        與組件屬性一樣,我們是通過定義一個函數的形式來返回派生數據的,` getters` 函數接受兩個參數

                - 第一個參數:`state` 對象

                - 第二個參數:`getters` 對象

通過屬性訪問

        同樣的,與組件計算屬性一樣,默認是通過屬性的方式去訪問 `getters` 中的數據的,這種方式與組件的計算屬性一樣,

        也是會緩存 結果的

通過方法訪問

        我們還可以通過閉包函數的形式返回一個函數,來實現給 `getters` 函數傳參,需要注意的是這種方式不支持結果緩存

使用輔助函數 `mapGetters`

        與 `mapState` 函數類似,通常映射到組件的 `computed` 上


mutations(改變)

        更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation(類似 redux 中的 action + reducer),Vuex 中的 mutation 非常類似於事件:

        每個 mutation 都有一個字符串的 **事件類型 (type)** 和 一個 **回調函數 (handler)**

                `mutation` 中的函數不要直接調用


commit(提交)

        type

                    要提交的 `mutation` 回調函數名稱

        payload

                    載荷:提交的額外數據,任意格式


mutation 函數

        `mutation` 中的函數被 `commit` 執行的時候,接收兩個參數

                -   第一個參數:`state` 對象

                -   第二個參數: `commit` 提交的 `payload`

        在 `mutation` 函數中,我們就可以通過 `state` 對象進行狀態數據的修改


使用輔助函數 `mapMutations`

        `mapMutations` 函數的使用與 `mapState` 和 `mapGetters` 類似,但是其一般是把組件的 `methods` 映射

        爲 `store` 的 `mutations` 的 `commit` 調用


mutation 函數必須是同步的

        `commit` 方法沒有返回值


actions

        `action` 中的函數與 `mutation` 中的函數類似,但是它主要用來進行異步任務的處理,然後通過提交 `mutation` 來修改 `state`

                > 注意:`action` 中的函數不要直接修改 `state`


dispatch派發

        `action` 任務需要通過 `dispatch` 方法來提交(派發),與 `commit` 類似

        `dispatch` 方法有返回值,且一定返回一個 `promise` 對象


action 函數

        `action` 中的函數執行的過程中也接受兩個參數

                - 第一個參數:`store` 對象

                - 第二個參數: `dispatch` 提交的 `payload`


使用輔助函數 `mapActions`

        與 `mapMutations` 函數類似,把組件的 `methods` 映射爲 `store` 的 `actions` 的 `dispatch` 調用

 


Module

        這個更多的是基於一種代碼組織結構上的輔助

                https://vuex.vuejs.org/zh/guide/modules.html

                https://vuex.vuejs.org/zh/guide/structure.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章