Vuex全解

一. 什麼是Vuex?

 

Vuex

Vuex是一個專門爲Vue.js應用程序開發的狀態管理模式, 它採用集中式存儲管理全部組件的公共狀態, 並以相應的規則保證狀態以一種可預測的方式發生變化.

Vuex核心

上圖中綠色虛線包裹起來的部分就是Vuex的核心, state中保存的就是公共狀態, 改變state的惟一方式就是經過mutations進行更改. 可能你如今看這張圖有點不明白, 等通過本文的解釋和案例演示, 再回來看這張圖, 相信你會有更好的理解.

二. 爲何要使用Vuex?

試想這樣的場景, 好比一個Vue的根實例下面有一個根組件名爲App.vue, 它下面有兩個子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通信能夠經過props傳值的方式, 可是若是A.vue和B.vue之間的通信就很麻煩了, 他們須要共有的父組件經過自定義事件進行實現, A組件想要和B組件通信每每是這樣的:

組件通信

 

• A組件說: "報告老大, 可否幫我託個信給小弟B" => dispatch一個事件給App
• App老大說: "包在我身上, 它須要監聽A組件的dispatch的時間, 同時須要broadcast一個事件給B組件"
• B小弟說: "信息已收到", 它須要on監聽App組件分發的事件

這只是一條通信路徑, 若是父組件下有多個子組件, 子組件之間通信的路徑就會變的很繁瑣, 父組件須要監聽大量的事件, 還須要負責分發給不一樣的子組件, 很顯然這並非咱們想要的組件化的開發體驗.

Vuex就是爲了解決這一問題出現的

三.如何引入Vuex?

1. 下載vuex: npm install vuex --save
2. 在main.js添加:

import Vuex from 'vuex' Vue.use( Vuex ); const store = new Vuex.Store({ //待添加 }) new Vue({ el: '#app', store, render: h => h(App) }) 

四. Vuex的核心概念?

在介紹Vuex的核心概念以前, 我使用vue-cli初始化了一個demo, 準備以代碼的形式來講明Vuex的核心概念, 你們能夠在github上的master分支進行下載.這個demo分別有兩個組件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存着共有的商品列表, 代碼和初始化的效果以下圖所示:

初始化效果

 

//App.vue中的初始化代碼 <template> <div id="app"> <product-list-one v-bind:products="products"></product-list-one> <product-list-two v-bind:products="products"></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' import ProductListTwo from './components/ProductListTwo.vue' export default { name: 'app', components: { 'product-list-one': ProductListOne, 'product-list-two': ProductListTwo }, data () { return { products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } } } </script> <style> body{ font-family: Ubuntu; color: #555; } </style> 

//ProductListOne.vue <template> <div id="product-list-one"> <h2>Product List One</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-one{ background: #FFF8B1; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-one ul{ padding: 0; } #product-list-one li{ display: inline-block; margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #E8800C; } </style> 

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-two{ background: #D1E4FF; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-two ul{ padding: 0; list-style-type: none; } #product-list-two li{ margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #860CE8; display: block; } </style> 

核心概念1: State

state就是Vuex中的公共的狀態, 我是將state看做是全部組件的data, 用於保存全部組件的公共數據.

• 此時咱們就能夠把App.vue中的兩個組件共同使用的data抽離出來, 放到state中,代碼以下:

//main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' Vue.use( Vuex ) const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } }) new Vue({ el: '#app', store, render: h => h(App) }) 

• 此時,ProductListOne.vue和ProductListTwo.vue也須要作相應的更改

//ProductListOne.vue export default { data () { return { products : this.$store.state.products //獲取store中state的數據 } } } 

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products //獲取store中state的數據 } } } 

• 此時的頁面以下圖所示, 能夠看到, 將公共數據抽離出來後, 頁面沒有發生變化.

  
  
  

  state效果

到此處的Github倉庫中代碼爲: 分支code01

核心概念2: Getters

我將getters屬性理解爲全部組件的computed屬性, 也就是計算屬性. vuex的官方文檔也是說到能夠將getter理解爲store的計算屬性, getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

• 此時,咱們能夠在main.js中添加一個getters屬性, 其中的saleProducts對象將state中的價格減小一半(除以2)

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ //添加getters saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } } }) 

• 將productListOne.vue中的products的值更換爲this.$store.getters.saleProducts

export default { data () { return { products : this.$store.getters.saleProducts } } } 

• 如今的頁面中,Product List One中的每項商品的價格都減小了一半

getters效果

到此處的Github倉庫中代碼爲: 分支code02

核心概念3: Mutations

我將mutaions理解爲store中的methods, mutations對象中保存着更改數據的回調函數,該函數名官方規定叫type, 第一個參數是state, 第二參數是payload, 也就是自定義的參數.

• 下面,咱們在main.js中添加mutations屬性,其中minusPrice這個回調函數用於將商品的價格減小payload這麼多, 代碼以下:

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ //添加mutations minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } } }) 

• 在ProductListTwo.vue中添加一個按鈕,爲其添加一個點擊事件, 給點擊事件觸發minusPrice方法

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減小价格</button> //添加按鈕 </ul> </div> </template> 

• 在ProductListTwo.vue中註冊minusPrice方法, 在該方法中commitmutations中的minusPrice這個回調函數
  注意:調用mutaions中回調函數, 只能使用store.commit(type, payload)

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload爲2 } } } 

• 添加按鈕, 能夠發現, Product List Two中的價格減小了2, 固然你能夠自定義payload,以此自定義減小對應的價格.
  
  

  mutations效果
  
  (Product List One中的價格沒有發生變化, 是由於getters將價格進行了緩存)

到此處的Github倉庫中代碼爲: 分支code03

核心概念4: Actions

actions 相似於 mutations，不一樣在於：

• actions提交的是mutations而不是直接變動狀態

• actions中能夠包含異步操做, mutations中絕對不容許出現異步

• actions中的回調函數的第一個參數是context, 是一個與store實例具備相同屬性和方法的對象

• 此時,咱們在store中添加actions屬性, 其中minusPriceAsync採用setTimeout來模擬異步操做,延遲2s執行 該方法用於異步改變咱們剛纔在mutaions中定義的minusPrice

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } }, actions:{ //添加actions minusPriceAsync( context, payload ) { setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000) } } }) 

• 在ProductListTwo.vue中添加一個按鈕,爲其添加一個點擊事件, 給點擊事件觸發minusPriceAsync方法

<template>
    <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減小价格</button> <button @click="minusPriceAsync">異步減小价格</button> //添加按鈕 </ul> </div> </template> 

• 在ProductListTwo.vue中註冊minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個回調函數

export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); }, minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分發actions中的minusPriceAsync這個異步函數 } } } 

• 添加按鈕, 能夠發現, Product List Two中的價格延遲2s後減小了5

  
  
  

  actions效果

到此處的Github倉庫中代碼爲: 分支code04

核心概念5: Modules

因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割

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 的狀態 

【相關連接】

1. 本文代碼地址: https://github.com/Lee-Tanghui/Vuex-Demo
2. Vuex官方文檔: https://vuex.vuejs.org/zh-cn/intro.html
3. Vuex官方案例演示源碼: https://github.com/vuejs/vuex/tree/dev/examples

做者：Lee_tanghui連接：https://www.jianshu.com/p/a804606ad8e9