從前整理過vuex才漆，這篇是補(bǔ)充
最簡單的vuex
多個(gè)組件共享狀態(tài)時(shí)的vuex
初始化
vue create vuex-pro
mannul 裝babel 其余不裝
yarn serve啟動(dòng)項(xiàng)目
vuex基本使用
yarn add vuex
從前整理的文章醇滥，還是這些操作
mapstate
Bar.foo
import { mapState } from 'vuex'
getter
store中的計(jì)算屬性
- 基本用法
準(zhǔn)備數(shù)據(jù)
getter中的方法，找到剩余未作的事件數(shù)量
getters: {
remaining: state => {
return state.todos.filter(item => item.done === false).length
}
}
引入
import { mapGetters } from 'vuex'
使用
- getter返回函數(shù)
getter中的方法
mapGetters中也要改，剩下具體用法
mutations
-
一種推薦的寫法
-
mutation要遵守vue的響應(yīng)規(guī)則
需要在對(duì)象添加新屬性時(shí)
Vue.set(obj, 'newProp', 123)
或者
state.obj = { ...state.obj, newProp: 123 } - 使用常量替代 Mutation 事件類型
大型項(xiàng)目使用躲履，人少了就不用 -
mapmutations
可以使用mapmutations在組件中提交mutation，必須是同步的
action
可以包含異步操作
- 基本使用
store.js
actions: {
increment( {commit}, {num = 1}) {
setTimeout(() => {
commit({
type: 'increment',
num
})
}, 1000);
}
}
視圖層
<button @click="asyncIncre">異步增加</button>
方法
asyncIncre () {
this.$store.dispatch('increment', {
num: 2
})
}
- 其余
mapActions可以取別名
可以結(jié)合Promise使用
可以結(jié)合async和await使用
可以調(diào)用異步api以及分發(fā)多重mutations
Module
將store分割成不同的模塊米诉。結(jié)合mobx里的store理解
即使寫在模塊里篷帅，action mutation getter也是全局的，除非加上namespaced: true,惊橱，調(diào)用的時(shí)候在視圖層{{ $store.getters['foo/abc'] }}即可
購物車案例
vuex插件
自定義
內(nèi)置logger
vuex-persistedstate -- 可以同步狀態(tài)箭昵，刷新也不會(huì)丟失，類似于結(jié)合localStorage使用
