export default {
props: ['products'],
data () {
return {
}
}
}
#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;
}
核心概念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
Product List Two
{{ product.name }}
${{ product.price }}
//添加按鈕
- 在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方法
Product List Two
{{ product.name }}
${{ product.price }}
//添加按鈕
- 在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 的狀態
閱讀更多 南京菜菜工作室 的文章
