2. 程式人生 > >Vue元件通訊深入Vuex

Vue元件通訊深入Vuex

阿新 • • 發佈：2018-12-15

建議：部落格中的例子都放在vue_blog_project工程中，推薦結合工程例項與部落格一同學習

上一篇部落格（Vue元件通訊深入）中，介紹了多種方法來實現元件之間的通訊，但是涉及到深層巢狀和非直接關聯元件之間的通訊時，都會遇到無法追蹤資料和除錯的問題，而vuex就是為解決此類問題而生的。

這篇部落格將簡要的介紹vuex的基本用法和最佳實踐，然後完成下面的demo

clipboard.png

1. Vuex 簡介

宣告：在此僅介紹Vuex精華知識，更詳盡的知識請參考Vuex中文官網

1.1 初識Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化

Vuex 解決了多個檢視依賴於同一狀態和來自不同檢視的行為需要變更同一狀態的問題，將開發者的精力聚焦於資料的更新而不是資料在元件之間的傳遞上

1.2 Vuex各個模組

（1）state：用於資料的儲存，是store中的唯一資料來源

// 定義
new Vuex.Store({
    state: {
        allProducts: []
    }
    //...
})
// 元件中獲取
this.$store.state.allProducts

（2）getters：如vue中的計算屬性一樣，基於state資料的二次包裝，常用於資料的篩選和多個數據的相關性計算

// 定義
getters: {
    cartProducts(state, getters, rootState) 
        => (getters.allProducts.filter(p => p.quantity))
}
// 元件中獲取
this.$store.getters.cartProducts

（3）mutations：類似函式，改變state資料的唯一途徑，且不能用於處理非同步事件（重點！！！）

// 定義
mutations: {
    setProducts (state, products) {
        state.allProducts = products
    }
}

// 元件中使用
this.$store.commit('setProducts', {//..options})

（4）actions：類似於mutation，用於提交mutation來改變狀態，而不直接變更狀態，可以包含任意非同步操作

// 定義（shop為api）
actions: {
    getAllProducts ({ commit }, payload) {
        shop.getProducts((res) => {
            commit('setProducts', res)
        })
    }
}

// 元件中使用
this.$store.dispatch('getAllProducts', {//..payload})

（5）modules：類似於名稱空間，用於專案中將各個模組的狀態分開定義和操作，便於維護

// 定義
const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

// 元件中使用
store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

注意：預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性名稱空間的——這樣使得多個模組能夠對同一 mutation 或 action 作出響應，僅有state是區域性作用。因此，常用getters將state包裝後輸出，這樣可以直接通過this.$store.getters.的方式拿到資料，而不用去訪問某個模組下的state

1.3 輔助函式

在元件中使用store中的資料或方法時，按照上面的說法，每次都要this.$store.的方式去獲取，有沒有簡單一點的方式呢？輔助函式就是為了解決這個問題

// 元件中註冊
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    computed: {
        // 陣列形式，當對映的計算屬性的名稱與 state 的子節點名稱相同時使用
        ...mapState(['allProducts'])
        // 物件形式，可重新命名 state 子節點名稱
        ...mapState({
            products: state => state.allProducts
        })
        // 下面為了簡便，均以陣列形式使用
        ...mapGetters(['cartProducts'])
    },
    methods: {
        ...mapMutations(['setProducts']),
        ...mapActions(['getAllProducts'])
    }
}

// 元件中使用
// 變數
this.allProducts
this.products
// 方法
this.setProducts()
this.getAllProducts()

由於上面提到，常用的做法是將state中資料使用getter包裝後輸出，因此，mapState在專案中較少遇到，其他三個倒是經常使用，另外，有兩個注意項和兩個最佳實踐：

注意：

最佳實踐（後面的demo中會引導使用）：

  1. 使用常量替代 Mutation 事件型別，這樣可以使 linter 之類的工具發揮作用，同時把這些常量放在單獨的檔案中可以讓你的程式碼合作者對整個 app 包含的 mutation 一目瞭然
  2. store 結構使用如下方式
store
    ├── index.js             # 匯出 store 的地方
    ├── state.js             # 根級別的 state
    ├── getters.js           # 二次包裝state資料
    ├── actions.js           # 根級別的 action
    ├── mutations.js         # 根級別的 mutation
    ├── mutation-types.js    # 所有 mutation 的常量對映表
    └── modules              # 如果有.
        ├── ...

2. Vuex 安裝

（1）在專案中安裝Vuex：

npm install vuex --save

（2）在src目錄下新建store/index.js，其中程式碼如下：

import Vue from 'vue'
import Vuex from 'vuex'
// 修改state時在console列印，便於除錯
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

const state = {}
const getters = {}
const mutataions = {}
const actions = {}

export default new Vuex.Store({
    state,
    getters,
    mutataions,
    actions,
    // 嚴格模式，非法修改state時報錯
    strict: debug,
    plugins: debug ? [createLogger()] : []
})

（3）在入口檔案main.js中新增：

// ...
import router from './router'
import store from './store'

new Vue({
    el: '#app',
    router,
    store,
    // ...
})

可以對比vue-router和vuex的安裝方式：它們均為vue外掛，並在例項化元件時引入，在該例項下的所有元件均可由this.$router和this.$store的方式查詢到對應的外掛例項

3. Vuex 專案實踐

需求：完成在文章開頭看到的動圖功能【注：demo原始碼】，api資料和功能如下：

// 商品列表
[
    { 'id': 1, 'title': 'iPad 4 Mini', 'price': 500, 'inventory': 2 },
    { 'id': 2, 'title': 'H&M T-Shirt White', 'price': 10, 'inventory': 10 },
    { 'id': 3, 'title': 'Charli XCX - Sucker CD', 'price': 20, 'inventory': 5 }
]

功能1： 商品增減時，庫存變化，購物車列表和金額變化功能2： 清空購物車時，所有資料還原

分析：元件結構：一個父元件包裹兩個子元件商品列表和購物車；資料方面：商品列表資料來自於api介面+加入購物車數目標誌，加入購物車商品列表來自商品列表的篩選；

基於上面的分析，可如下組織程式碼

（1）store中程式碼

const state = {
    all: []
}

const getters = {
    // 總商品列表
    allProducts: state => state.all,
    // 購物車商品列表
    cartProducts: (state, getters) => (getters.allProducts.filter(p => p.quantity)),
    // 購物車商品總價
    cartTotalPrice: (state, getters) => {
        return getters.cartProducts.reduce((total, product) => {
            return total + product.price * product.quantity
        }, 0)
    }
}

const mutations = {
    setProducts (state, products) {
        state.all = products
    },
    clearCartProducts (state) {
        state.all.forEach(p => {
            p.quantity = 0
        })
    }
}

const actions = {
    // 獲取資料後，加入選取數量quantity的標識，以區分是否被加入購物車
    getAllProducts ({ commit }) {
        shop.getProducts((res) => {
            const newRes = res.map(p => Object.assign({}, p, {quantity: 0}))
            commit('setProducts', newRes)
        })
    }
}

（2）商品列表元件ProductList.vue

<template>
    <ul class="product-wrapper">
        <li class="row header">
            <div v-for="(th,i) in tHeader" :key="i">{{ th }}</div>
        </li>
        <li class="row" v-for="product in currentProducts" :key="product.id">
            <div>{{ product.title }}</div>
            <div>{{ product.price }}</div>
            <div>{{ product.inventory - product.quantity }}</div>
            <div>
                <el-input-number
                    :min="0" :max="product.inventory"
                    v-model="product.quantity"
                    @change="handleChange">
                </el-input-number>
            </div>
        </li>
    </ul>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    data () {
        return {
            tHeader: ['名稱', '價格', '剩餘庫存', '操作'],
            currentProducts: []
        }
    },
    computed: {
        ...mapGetters(['allProducts'])
    },
    // 為了避免表單直接修改store中的資料，需要使用watch模擬雙向繫結
    watch: {
        allProducts: {
            handler (val) {
                this.currentProducts = JSON.parse(JSON.stringify(this.allProducts))
            },
            deep: true
        }
    },
    created () {
        this.getAllProducts()
    },
    methods: {
        handleChange () {
            this.setProducts(this.currentProducts)
        },
        ...mapMutations(['setProducts']),
        ...mapActions(['getAllProducts'])
    }
}
</script>

（3）購物車列表元件ShoppingCart.vue

<template>
    <div class="cart">
        <p v-show="!products.length"><i>Please add some products to cart.</i></p>
    <ul>
        <li v-for="product in products" :key="product.id">
            {{ product.title }} - {{ product.price }} x {{ product.quantity }}
        </li>
    </ul>
    <p>Total: {{ total }}</p>
    <el-button @click="clearCartProducts">CLEAR</el-button>
</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapGetters({
            products: 'cartProducts',
            total: 'cartTotalPrice'
        })
    },
    methods: {
        ...mapMutations(['clearCartProducts'])
    }
}
</script>

（4）結合上面所說的最佳實踐優化：

首先，按照上面的tree結構將store資料夾拆分；接下來：

在store中新建mutation-types.js檔案，

export const SET_PRODUCTS = 'SET_PRODUCTS'
export const CLEAR_CART_PRODUCTS = 'CLEAR_CART_PRODUCTS'

mutations.js作如下更改：

import * as types from './mutation-types'

export default {
    [types.SET_PRODUCTS] (state, products) {
        state.all = products
    },
    [types.CLEAR_CART_PRODUCTS] (state) {
        state.all.forEach(p => {
            p.quantity = 0
        })
    }
}

actions.js作如下更改：

import shop from '@/api/shop'
import * as types from './mutation-types'

export default {
    // 獲取資料後，加入選取數量quantity的標識，以區分是否被加入購物車
    getAllProducts ({ commit }) {
        shop.getProducts((res) => {
        const newRes = res.map(p => Object.assign({}, p, {quantity: 0}))
            commit(types.SET_PRODUCTS, newRes)
        })
    },
    // 這裡將mutation中的方法以action的形式輸出，主要是元件中有使用mutation的方法，到時僅需引用mapActions即可，可按實際情況使用
    setProducts ({ commit }, products) {
        commit(types.SET_PRODUCTS, products)
    },
    clearCartProducts ({ commit }) {
        commit(types.CLEAR_CART_PRODUCTS)
    }
}

另外，在元件引用mutation部分也需要作相應修改

在此僅將demo中的核心部分列出，完整的程式碼請檢視demo原始碼

相關推薦

Vue元件通訊深入Vuex

建議：部落格中的例子都放在vue_blog_project工程中，推薦結合工程例項與部落格一同學習 上一篇部落格（Vue元件通訊深入）中，介紹了多種方法來實現元件之間的通訊，但是涉及到深層巢狀和非直接關聯元件之間的通訊時，都會遇到無法追蹤資料和除錯的問題，而vuex就是為解

vue元件通訊全揭祕

這文章在一年前已經寫出來了。今天還是決定放出來供所有人學習。為什麼我會寫vue元件通訊全揭祕，因為無論任何元件模式的框架。元件是核心，只有把元件寫元件之間能理順了。專案也就自然順了。內容非常多，而且一年後我覺得元件的通訊部分的沒有任何變化。沒有任何一點過時。希望對大家有幫助 第01課：給你一個不學 Vue

vue元件通訊--注意事項及經驗總結

元件間的通訊是是實際開發中非常常用的一環，如何使用對專案整體設計、開發、規範都有很實際的的作用，我在專案開發中對此深有體會，總結下vue元件間通訊的幾種方式，討論下各自的使用場景 文章對相關場景預覽 父->子元件間的資料傳遞 子->父元件間的資料傳遞

Vue元件通訊之二：事件監聽函式$emit/$on/$off

在vue2.x版本中自定義時間都需要通過$emit/$on/$off函式來進行觸發、監聽和取消監聽。 如果瞭解過JavaScript的設計模式-------觀察者模式，一定知道dispatchEvent和addEventListener這兩個方法。Vue元件中也有與之類似的模式，子元件用$emi

Vue元件通訊之一props

元件間通訊是元件開發時非常重要的一個環節，Vue在元件鍵通訊提供了直接訪問元件例項的方法，同時也提供了自定義事件機制，通過廣播、委派、監聽等形式跨元件的函式呼叫。 在元件的例項中，Vue提供了三個屬性對其父子元件以及根例項進行直接訪問： （1）$parent：父元件例項； （2）$chi

Vue 元件通訊總結

父-子元件通訊 通過Props / Attrs，注意： 此處不區分是否加引號，若不bind，皆作字串處理，否則作為表示式處理 若傳入物件，則子元件上的該物件與父元件中的該物件指向同一個地址，如果希望對傳入的物件進行修改且不影響父元件，則需要看情況對其進行深、淺拷貝

Vue元件通訊之Bus

關於元件通訊我相信小夥伴們肯定也都很熟悉，就不多說了，對元件通訊還不熟悉的小夥伴移步這裡。 在vue2.0中 $dispatch 和 $broadcast 已經被棄用。官方文件中給出的解釋是： 因為基於元件樹結構的事件流方式實在是讓人難以理解，並且在元件結構擴充套件的過程中會變得越來越脆弱。這種事件方式

Vue-元件通訊

一、父子元件間-自定義事件 子元件用$emit()來觸發事件，父元件用$on來監聽子元件的事件。 //父元件程式碼 <my-component @increase="handleGetTotal" ></my-component> //父元件函式程式碼

vue元件通訊，點選傳值，動態傳值（父傳子，子傳父）

vue說到元件通訊，無非是父元件傳子元件，子元件傳父元件，跨級元件傳值，同級元件傳值，個人覺得，除了父子元件的傳值，其餘情況就可以用vuex來解決了，這篇先不說vuex，這裡介紹父子元件傳值。不會你打我！ 一、父元件傳子元件，核心--props 下面是場景，點選傳值給子元

vue元件通訊全面總結

寫在前面 元件間的通訊是是實際開發中非常常用的一環，如何使用對專案整體設計、開發、規範都有很實際的的作用，我在專案開發中對此深有體會，總結下vue元件間通訊的幾種方式，討論下各自的使用場景 文章對相關場景預覽 父->子元件間的資料傳遞 子->父元件間的資料傳遞 兄弟元件間的

vue元件通訊的幾種方式

最近用vue開發專案，記錄一下vue元件間通訊幾種方式 第一種，父子元件通訊 一.父元件向子元件傳值 1.建立子元件，在src/components/資料夾下新建一個Child.vue 2.Child.vue的中建立props，然後建立一個名為message的屬性

vue元件通訊之評論

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

vue元件通訊

一、子元件與父元件通訊 這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。 首先，父元件的與子元件的通訊是通過子元件的props。 那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？ 父元件可以在使用子元件的地方直接用 v-on 來監聽子元件

Vue元件通訊父子傳值之---子傳父

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="vi

Vue元件通訊（props） 父傳子

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="vi

vue元件通訊 子傳父 父傳子 兄弟傳值(開發例項)

父元件 <template>      <div id="app">         <dome :msgs="mag" :adds="add" ref="doem"

看了就懂的vue元件通訊

本文在具體實現上，主要是基於vue2.0並使用vue-cli腳手架搭建的一個基本專案，至於vue-cli這個腳手架，如果不懂也沒關係，可以先用 ￣□￣｜｜，主要介紹的是元件之間的通訊。 0、前置 首先，肯定要有安裝node和vue-cli了，具體怎麼安裝就不

Vue元件通訊之非父子元件傳值

前言： 如果想要了解非父子關係的元件傳值，最好是在瞭解父傳子和子傳父的基礎上在來了解非父子傳值可能會有更透徹的思路。 因為非父子傳值是通過定義事件匯流排來代理實現父傳子+子傳父從而實現的傳值方式。 這是我總結的父子傳值相關的知識，可供參考: https://www.cnblogs.com/Viava

Vue元件通訊方式全面詳解

## vue元件通訊方式全面詳解 眾所周知，Vue主要思想就是元件化開發。因為，在實際的專案開發中，肯定會以元件的開發模式進行。形如頁面和頁面之間需要通訊一樣，Vue 元件和元件之間肯定也需要互通有無、共享狀態。接下來，我們就悉數給大家展示所有 Vue 元件之間的通訊方式。 ### 元件關係 ![](h

Vue 兄弟元件通訊（不使用Vuex）

方法一、建立bus中間機制，兄弟元件$emit 和$on進行通訊 方法二、子傳父，然後父傳子。 其實兩種方法原理相似。   我採用了方法二。 a元件中觸發父元件b的isRepotags事件傳遞res.data[0].repotags