Vue 學(xué)習(xí)筆記4（77-87）
學(xué)習(xí)地址：https://ke.qq.com/course/279700
目錄：
- 01-01 git下載代碼
- 02-27 Vue2.x
- 28-39 路由精講
- 40-49 Vue-Cli3.0
- 50-64 Vue2.x-實(shí)戰(zhàn)項(xiàng)目(個(gè)人博客)
- 65-76 Vue2.x-實(shí)戰(zhàn)項(xiàng)目(用戶管理)
- 77-87 Vuex 核心概念如下
vuex
01 Vuex-成果展示及項(xiàng)目搭建
略
02 Vuex-一個(gè)簡(jiǎn)單的Vue APP
父子傳值
<product-list-one :products='products'></product-list-one>
props: ['products'],
State
03 Vuex-搭建Vuex中央狀態(tài)管理, 04 Vuex-使用computed獲取store數(shù)據(jù)
Vuex
Centralized State Management for Vue.js.
src 目錄下新建 store 文件夾坊夫，下面新建 index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
products:[
{name:'馬云',price:'200'},
{name:'馬化騰',price:'140'},
{name:'馬冬梅',price:'20'},
{name:'馬蓉',price:'10'},
]
}
})
main.js 中引入
import {store} from './store'
new Vue({
store,
...
}
組建中使用，computed 屬性獲取 store 中數(shù)據(jù)
<li v-for="product in products" :key='product'>
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
<script>
export default{
computed: {
products(){
return this.$store.state.products
}
},
}
</script>
Getter
05 Vuex-Getters
index.js 文件中怎披，新增 getters 屬性辰斋，里面放其他組件可以調(diào)用的方法
export const store = new Vuex.Store({
state:{
products:[
{name:'馬云',price:'200'},
{name:'馬化騰',price:'140'},
{name:'馬冬梅',price:'20'},
{name:'馬蓉',price:'10'},
]
},
getters:{
saleProducts:(state)=>{
var saleProducts = state.products.map(product =>{
return{
name: "**" + product.name + "**" ,
price: product.price / 2
}
});
return saleProducts;
}
}
})
組件對(duì) store 中方法的調(diào)用
<li v-for="product in saleProducts" :key='product'>
<span class="name">{{product.name}}</span>
<span class="price">${{product.price}}</span>
</li>
<script>
export default{
computed: {
saleProducts(){
return this.$store.getters.saleProducts;
}
},
}
</script>
Mutation
06 Vuex-Mutations
谷歌瀏覽器添加插件Vue.js devtools，可以跟蹤vuex狀態(tài)
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)窒所。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)帆锋。
store/index.js 中添加 mutations 屬性
mutations:{
reducePriceV:state=>{
state.products.forEach(product =>{
product.price -= 1;
})
}
}
組建中調(diào)用方法 reducePriceV
<button @click="reducePrice">降價(jià)</button>
<script>
export default {
methods: {
reducePrice(){
this.$store.commit('reducePriceM') // mutations中的方法
}
},
}
</script>
Action
07 Vuex-Actions
Action 類似于 mutation吵取，不同在于：
- Action 提交的是 mutation，而不是直接變更狀態(tài)锯厢。
- Action 可以包含任意異步操作皮官。(vuex調(diào)試器中方法和變化同時(shí)出來(lái))
注冊(cè)action
Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象脯倒，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters捺氢。
組件觸發(fā)action
Action 通過(guò) store.dispatch 方法觸發(fā)
接收第二個(gè)參數(shù) payload
eg:
store/index.js 中添加 actions 屬性
actions:{
reducePriceA:context=>{
setTimeout(function(){
context.commit('reducePriceM')
},2000)
}
}
組建中調(diào)用方法 reducePriceM
<button @click="reducePrice">降價(jià)</button>
<script>
export default {
methods: {
reducePrice(){
this.$store.dispatch('reducePriceA') // actions中的方法
}
},
}
</script>
08 Vuex-mapMutations & mapActions
在組件中提交 Mutation
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation藻丢，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
// `mapMutations` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
})
}
}
在組件中分發(fā) Action
你在組件中使用 this.$store.dispatch('xxx') 分發(fā) action摄乒，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）：
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
// `mapActions` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
})
}
}
Module
09 Vuex-Module
由于使用單一狀態(tài)樹悠反，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)缺狠，store 對(duì)象就有可能變得相當(dāng)臃腫问慎。
為了解決以上問(wèn)題，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)
