一. 什么是Vuex?
Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式昵仅， 它采用集中式存儲管理所有組件的公共狀態(tài),导绷，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
上圖中綠色虛線包裹起來的部分就是Vuex的核心蕴纳，state中保存的就是公共狀態(tài),会油，改變state的唯一方式就是通過mutations進(jìn)行更改。
二. 為什么要使用Vuex?
試想這樣的場景, 比如一個Vue的根實(shí)例下面有一個根組件名為App.vue, 它下面有兩個子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通訊可以通過props傳值的方式, 但是如果A.vue和B.vue之間的通訊就很麻煩了, 他們需要共有的父組件通過自定義事件進(jìn)行實(shí)現(xiàn).
A組件想要和B組件通訊往往是這樣的:
A組件說: "報告老大, 能否幫我托個信給小弟B" => dispatch一個事件給App
App老大說: "包在我身上, 它需要監(jiān)聽A組件的dispatch的時間, 同時需要broadcast一個事件給B組件"
B小弟說: "信息已收到", 它需要on監(jiān)聽App組件分發(fā)的事件
這只是一條通訊路徑, 如果父組件下有多個子組件, 子組件之間通訊的路徑就會變的很繁瑣, 父組件需要監(jiān)聽大量的事件, 還需要負(fù)責(zé)分發(fā)給不同的子組件, 很顯然這并不是我們想要的組件化的開發(fā)體驗(yàn).
而Vuex就是為了解決這一問題出現(xiàn)的古毛。
三.如何引入Vuex?
核心知識：
state: 狀態(tài)中心
mutations: 更改狀態(tài)
actions: 異步更改狀態(tài)
getters: 獲取狀態(tài)
modules: 將state分成多個modules翻翩，便于管理
- 首先使用 vue-init 初始化一個 vue-demo；
- 然后在src文件目錄下新建一個名為store的文件夾稻薇，為方便引入并在store文件夾里新建一個index.js嫂冻，里面的內(nèi)容如下：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
3.接下來，在 main.js里面引入store塞椎，然后再全局注入一下桨仿，這樣一來就可以在任何一個組件里面使用this.$store了：
import store from './store' // 引入store
new Vue({
el: '#app',
router,
store, // 使用store
template: '<App/>',
components: { App }
})
代碼和初始化的效果如下圖所示:
//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: 200},
{name: '鍵盤', price: 400},
{name: '耳機(jī)', price: 600},
{name: '顯示屏', price: 800}
]
}
}
}
</script>
<style>
body{
font-family: Ubuntu;
color: #555;
}
</style>
// components/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>
//components/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-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>
核心概念1: State
state就是Vuex中的公共的狀態(tài), 我是將state看作是所有組件的data, 用于保存所有組件的公共數(shù)據(jù).
此時我們就可以把App.vue中的兩個組件共同使用的data抽離出來, 放到state中,
store/index.js 代碼如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { //要設(shè)置的全局訪問的state對象
products: [
{name: '鼠標(biāo)', price: 200},
{name: '鍵盤', price: 400},
{name: '耳機(jī)', price: 600},
{name: '顯示屏', price: 800}
]
}
})
export default store;
此時,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屬性, 也就是計算屬性. vuex的官方文檔也是說到可以將getter理解為store的計算屬性, getters的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算案狠。
此時,我們可以在index.js中添加一個getters屬性, 其中的saleProducts對象將state中的價格減少一半(除以2)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { //要設(shè)置的全局訪問的state對象
products: [
{name: '鼠標(biāo)', price: 200},
{name: '鍵盤', price: 400},
{name: '耳機(jī)', price: 600},
{name: '顯示屏', price: 800}
]
},
getters:{ //添加getters
saleProducts: (state) => {
let saleProducts = state.products.map( product => {
return {
name: product.name,
price: product.price / 2
}
})
return saleProducts;
}
}
})
export default store;
將productListOne.vue中的products的值更換為this.$store.getters.saleProducts
export default {
data () {
return {
products: this.$store.getters.saleProducts
}
}
}
現(xiàn)在的頁面中,Product List One中的每項(xiàng)商品的價格都減少了一半
核心概念3: Mutations
將mutaions理解為store中的methods, mutations對象中保存著更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫type, 第一個參數(shù)是state, 第二參數(shù)是payload, 也就是自定義的參數(shù).
下面,我們在index.js中添加mutations屬性,其中minusPrice這個回調(diào)函數(shù)用于將商品的價格減少payload這么多, 代碼如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { //要設(shè)置的全局訪問的state對象
products: [
{name: '鼠標(biāo)', price: 200},
{name: '鍵盤', price: 400},
{name: '耳機(jī)', price: 600},
{name: '顯示屏', price: 800}
]
},
getters:{ //添加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
})
}
}
})
export default store;
在ProductListTwo.vue中添加一個按鈕,為其添加一個點(diǎn)擊事件, 給點(diǎn)擊事件觸發(fā)minusPrice方法:
<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這個回調(diào)函數(shù)
注意:調(diào)用mutaions中回調(diào)函數(shù), 只能使用store.commit(type, payload)
export default {
data () {
return {
products: this.$store.state.products
}
},
methods: {
minusPrice() {
this.$store.commit('minusPrice', 2)
},
}
}
點(diǎn)擊按鈕, 可以發(fā)現(xiàn), Product List Two中的價格減少了2, 當(dāng)然你可以自定義payload,以此自定義減少對應(yīng)的價格.
(Product List One中的價格沒有發(fā)生變化, 是因?yàn)間etters將價格進(jìn)行了緩存)
核心概念4: Actions
actions 類似于 mutations服傍，不同在于：
actions提交的是mutations,而不是直接變更狀態(tài)
actions中可以包含異步操作, mutations中絕對不允許出現(xiàn)異步
actions中的回調(diào)函數(shù)的第一個參數(shù)是context, 是一個與store實(shí)例具有相同屬性和方法的對象.
此時,我們在store中添加actions屬性, 其中minusPriceAsync采用setTimeout來模擬異步操作,延遲2s執(zhí)行 該方法用于異步改變我們剛才在mutaions中定義的minusPrice:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: { //要設(shè)置的全局訪問的state對象
products: [
{name: '鼠標(biāo)', price: 200},
{name: '鍵盤', price: 400},
{name: '耳機(jī)', price: 600},
{name: '顯示屏', price: 800}
]
},
getters:{ //添加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
})
}
},
actions:{ //添加actions
minusPriceAsync( context, payload ) {
setTimeout( () => {
context.commit( 'minusPrice', payload ); //context提交
}, 2000)
}
}
})
export default store;
在ProductListTwo.vue中添加一個按鈕,為其添加一個點(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">減少價格</button>
<button @click="minusPriceAsync">異步減少價格</button> //添加按鈕
</ul>
</div>
</template>
在ProductListTwo.vue中注冊minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個回調(diào)函數(shù)
export default {
data () {
return {
products: this.$store.state.products
}
},
methods: {
minusPrice() {
this.$store.commit('minusPrice', 2);
},
minusPriceAsync() {
this.$store.dispatch('minusPriceAsync', 5); //分發(fā)actions中的minusPriceAsync這個異步函數(shù)
}
}
}
點(diǎn)擊按鈕, 可以發(fā)現(xiàn), Product List Two中的價格延遲2s后減少了5，
mutations 和 actions 的區(qū)別
// 只有 mutations 才能改變 state（mutations 的參數(shù)是 state）骂铁，通過state去獲取商品改變價格吹零，使用的時候通過 commit 調(diào)用 minusPrice 方法 ------- this.$store.commit('minusPrice', 2);
mutations: function(state, payload) {
minusPrice() {
let newPrice = state.products.forEach(()=>{
product.price -= payload;
})
}
}
// 而 actions 是通過 context.commit() 方法去提交 mutations 內(nèi)的方法， actions 的參數(shù)是 context拉庵，使用的時候通過 dispatch 方法調(diào)用 ------- this.$store.dispatch('minusPriceAsync', 5)
actions:{ // 添加actions
minusPriceAsync( context, payload ) {
console.log(context);
context.commit( 'minusPrice', payload ); //context提交
// setTimeout( () => {
// context.commit( 'minusPrice', payload ); //context提交
// }, 2000)
}
}
// 頁面使用：
<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>
<script>
export default {
data () {
return {
products: this.$store.state.products
}
},
methods: {
minusPrice() {
this.$store.commit('minusPrice', 2)
},
minusPriceAsync() {
this.$store.dispatch('minusPriceAsync', 5); // 分發(fā)actions中的minusPriceAsync這個異步函數(shù)
}
}
}
</script>
核心概念5: Modules
由于使用單一狀態(tài)樹灿椅，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時名段，store 對象就有可能變得相當(dāng)臃腫阱扬。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）伸辟。每個模塊擁有自己的 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)
