一、Vuex簡介

??Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

??綠色虛線包裹起來的部分就是Vuex的核心, state中保存的就是公共狀態(tài), 改變state的唯一方式就是通過mutations進(jìn)行更改. 可能你現(xiàn)在看這張圖有點(diǎn)不明白, 等經(jīng)過本文的解釋和案例演示, 再回來看這張圖, 相信你會有更好的理解.

狀態(tài)管理應(yīng)用包含以下幾個(gè)部分：
state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將 state 映射到視圖；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。
是一個(gè)表示“單向數(shù)據(jù)流”理念的簡單示意：

狀態(tài)管理

當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡潔性很容易被破壞：

多個(gè)視圖依賴于同一狀態(tài)。
來自不同視圖的行為需要變更同一狀態(tài)。
對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護(hù)的代碼。

Vuex

為什么要使用Vuex?
??試想這樣的場景, 比如一個(gè)Vue的根實(shí)例下面有一個(gè)根組件名為App.vue, 它下面有兩個(gè)子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通訊可以通過props傳值的方式, 但是如果A.vue和B.vue之間的通訊就很麻煩了, 他們需要共有的父組件通過自定義事件進(jìn)行實(shí)現(xiàn), A組件想要和B組件通訊往往是這樣的:

組件通訊

??A組件說: "報(bào)告老大, 能否幫我托個(gè)信給小弟B" => dispatch一個(gè)事件給App
??App老大說: "包在我身上, 它需要監(jiān)聽A組件的dispatch的時(shí)間, 同時(shí)需要broadcast一個(gè)事件給B組件"
??B小弟說: "信息已收到", 它需要on監(jiān)聽App組件分發(fā)的事件
??這只是一條通訊路徑, 如果父組件下有多個(gè)子組件, 子組件之間通訊的路徑就會變的很繁瑣, 父組件需要監(jiān)聽大量的事件, 還需要負(fù)責(zé)分發(fā)給不同的子組件, 很顯然這并不是我們想要的組件化的開發(fā)體驗(yàn).

二、安裝Vuex

npm install vuex --save-dev

引入Vuex:

在main.js文件中引入該文件，在文件里面添加 import store from ‘./store’;，再在vue實(shí)例全局引入store對象；

import Vuex from 'vuex'

Vue.use( Vuex );

const store = new Vuex.Store({
    //待添加
})

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

三、示例
分別有兩個(gè)組件ProductListOne.vue和ProductListTwo.vue, 在App.vue的data中保存著共有的商品列表：
App.vue：

//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: '鼠標(biāo)', price: 20},
                {name: '鍵盤', price: 40},
                {name: '耳機(jī)', price: 60},
                {name: '顯示屏', price: 80}
            ]
        }
    }
}
</script>

<style>
body{
    font-family: Ubuntu;
    color: #555;
}
</style>

ProductListOne.vue：

//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

//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中的公共的狀態(tài), 我是將 State看作是所有組件的data, 用于保存所有組件的公共數(shù)據(jù)。
此時(shí)我們就可以把App.vue中的兩個(gè)組件共同使用的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: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', price: 60},
      {name: '顯示屏', price: 80}
    ]
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

此時(shí),ProductListOne.vue和ProductListTwo.vue也需要做相應(yīng)的更改

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

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

五、核心概念2: Getters

我將getters屬性理解為所有組件的computed屬性, 也就是計(jì)算屬性. vuex的官方文檔也是說到可以將getter理解為store的計(jì)算屬性, getters的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。
此時(shí),我們可以在main.js中添加一個(gè)getters屬性, 其中的saleProducts對象將state中的價(jià)格減少一半(除以2)

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', 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中的每項(xiàng)商品的價(jià)格都減少了一半

六、核心概念3: Mutations

我將mutaions理解為store中的methods, mutations對象中保存著更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫type, 第一個(gè)參數(shù)是state, 第二參數(shù)是payload, 也就是自定義的參數(shù).

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', 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中添加一個(gè)按鈕,為其添加一個(gè)點(diǎn)擊事件, 給點(diǎn)擊事件觸發(fā)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">減少價(jià)格</button> //添加按鈕
        </ul>
    </div>
</template>

在ProductListTwo.vue中注冊minusPrice方法, 在該方法中commitmutations中的minusPrice這個(gè)回調(diào)函數(shù)
注意:調(diào)用mutaions中回調(diào)函數(shù), 只能使用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
        }
    }
}

添加按鈕, 可以發(fā)現(xiàn), Product List Two中的價(jià)格減少了2, 當(dāng)然你可以自定義payload,以此自定義減少對應(yīng)的價(jià)格.
(Product List One中的價(jià)格沒有發(fā)生變化，原因是getter 監(jiān)聽的是map方法產(chǎn)生的新對象)

七、核心概念4: Actions

actions 類似于 mutations，不同在于：

actions提交的是mutations而不是直接變更狀態(tài);
actions中可以包含異步操作, mutations中絕對不允許出現(xiàn)異步;
actions中的回調(diào)函數(shù)的第一個(gè)參數(shù)是context, 是一個(gè)與store實(shí)例具有相同屬性和方法的對象;
此時(shí),我們在store中添加actions屬性, 其中minusPriceAsync采用setTimeout來模擬異步操作,延遲2s執(zhí)行該方法用于異步改變我們剛才在mutaions中定義的minusPrice


//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', 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中添加一個(gè)按鈕,為其添加一個(gè)點(diǎn)擊事件, 給點(diǎn)擊事件觸發(fā)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">減少價(jià)格</button>
            <button @click="minusPriceAsync">異步減少價(jià)格</button> //添加按鈕
        </ul>
    </div>
</template>

在ProductListTwo.vue中注冊minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個(gè)回調(diào)函數(shù)

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

添加按鈕, 可以發(fā)現(xiàn), Product List Two中的價(jià)格延遲2s后減少了5

八、核心概念5: Modules

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個(gè)比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對象就有可能變得相當(dāng)臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

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 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

九、Vue store存儲commit 和dispatch

his.$store.commit('toShowLoginDialog', true);
this.$store.dispatch('toShowLoginDialog',false)

主要區(qū)別是：
dispatch：含有異步操作，例如向后臺提交數(shù)據(jù)，寫法： this. $store.dispatch('mutations方法名',值) commit：同步操作，寫法：this.$ store.commit('mutations方法名',值)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

VUE開發(fā)--狀態(tài)管理Vuex(十八)

VUE開發(fā)--狀態(tài)管理Vuex(十八)

一、Vuex簡介

四、核心概念1: State

五、核心概念2: Getters

六、核心概念3: Mutations

七、核心概念4: Actions

八、核心概念5: Modules

九、Vue store存儲commit 和dispatch

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

VUE開發(fā)--狀態(tài)管理Vuex(十八)

一、Vuex簡介

四、核心概念1: State

五、核心概念2: Getters

六、核心概念3: Mutations

七、核心概念4: Actions

八、核心概念5: Modules

九、Vue store存儲commit 和dispatch

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、Vuex簡介

七、核心概念4: Actions

九、Vue store存儲commit 和dispatch