vuex 使用文檔小結(jié)篇
Vuex是什么?
Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到Vue 的官方調(diào)試工具 devtools extension,提供了諸如零配置的 time-travel調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。
安裝
直接下載CDN 引用
<script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>
npm
npm install vuex --save
在一個(gè)模塊化的打包系統(tǒng)中,您必須顯式地通過(guò)Vue.use() 來(lái)安裝Vuex?! ?/p>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
Vuex 是一個(gè)專為Vue.js 應(yīng)用程序開(kāi)發(fā) 的狀態(tài)管理模式,集中式存儲(chǔ)管理應(yīng)用的所有組件狀態(tài)。
狀態(tài)管理包含以下幾個(gè)部分狀態(tài):
state 驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源;
view 以生命方式將 state 映射到視圖。
actions 響應(yīng)在view 上的用戶書(shū)輸入導(dǎo)致的狀態(tài)變化。
幫助我們管理共享狀態(tài),中大型單頁(yè)面應(yīng)用。
state
單一狀態(tài)樹(shù) ,Vuex使用單一狀態(tài)樹(shù)用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。
在Vue 組件中獲得Vuex 狀態(tài)。
由于Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的,從store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法
就是在計(jì)算屬性中返回某個(gè)狀態(tài)。
創(chuàng)建一個(gè)Counter 組件
const Counter = { template: '<div>{{ count }}</div>' computed: { count (){ return store.state.count ?。? } }
每次 store.state.count 變化的時(shí)候,都會(huì)重新求取計(jì)算屬性,并且觸發(fā)更新相關(guān)的DOM
Vuex 通過(guò) store 選項(xiàng),提供了一種機(jī)制將狀態(tài)從根組件『注入』到每一個(gè)子組件中(需調(diào)用 Vue.use(Vuex)):
const app = new Vue({ el:'#app', // 把 store 對(duì)象提供給 “store” 選項(xiàng),這可以把 store 的實(shí)例注入所 有的子組件 store, components: {Counter}, template: ' <div class="app"> <counter></counter> </div> ' })
通過(guò)在根實(shí)例中注冊(cè) store 選項(xiàng),該store 實(shí)例會(huì)注冊(cè)入到跟組件下的所有子組件,且子組件能通過(guò) this.$store 訪問(wèn)到。更新 counter 的實(shí)現(xiàn):
const Counter = { template : '<div>{{ count }}</div>', computed: { count this.$store.state.count } }
mapState 輔助函數(shù)
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些冗余。
為了解決這個(gè)問(wèn)題,我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性?! ?/p>
// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState import { mapState } from 'vuex' export default { computed: mapState({ // 箭頭函數(shù)可以使代碼更簡(jiǎn)潔 count: state => state.count, // 傳字符串參數(shù) ‘count' 等同于 ‘state => state.count' countAlias: 'count', // 為了能夠使用 ‘this' 獲取局部狀態(tài),必須使用常規(guī)函數(shù) countPlusLocalState(state) { return state.count + this.localCount } }) }
當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí),我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組?! ?/p>
computed: mapState([ // 映射 this.count 為 store.state.count 'count' ])
組件仍然保有局部狀態(tài)。
Getters
有時(shí)候我們需要從store 中的state 中 的state 中派生一些狀態(tài),列如對(duì)列表進(jìn)行過(guò)濾并計(jì)算。
computed: { doneTodosCount() { return this.$store.state.todos.filter(todo => todo.done).length } }
Vuex 允許我們?cè)賡tore 中定義getters (可以認(rèn)為是stroe 的計(jì)算屬性)
Getters 接受state 作為其第一個(gè)參數(shù)?! ?/p>
const store = new Vuex.Store({ state: { todos:[ {id:1, text: '...' ,done: true}, {id:2,text:'...',done: false} ] }, getters: { doneTodos: state => { return state.todos.filter(todo=> todo.done) } } })
Getters 會(huì)暴露為store.getters 對(duì)象:
store.getters.doneTodos // [{id:1,text: '...',done:true}]
Getter 也可以接受其他getters 作為第二個(gè)參數(shù):
getters: { doneTodosCount: (state,getters) => { return getters.doneTodos.length } } store.getters.doneTodosCount // -> 1
我們可很容易的在任何組件中使用
computed: { doneTodosCount() { return this.$store.getters.doneTodosCount } }
mapGetters 輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是 store 中的getters 映射到局部計(jì)算屬性?! ?/p>
import {mapGetter} form 'vuex' export default { computed: { // 使用對(duì)象展開(kāi)運(yùn)算符將 getters 混入 ...mapGetters([ ‘doneTodosCount', 'anotherGetter' ]) } }
如果你想講一個(gè)getter 屬性另取名字,使用對(duì)象性時(shí)
mapGetters({ // 映射 this.doneCount 為 store.getters.doneTodosCount doneCount: 'doneTodosCount' })
Mutations
更改Vuex 的store 中的狀態(tài)的唯一方式就是提交 mutation Vuex 中的mutation
非常類似于事件,每個(gè) mutation 都有一個(gè)字符串的 事件類型 和回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方。并且他會(huì)接受 state 作為第一個(gè)參數(shù)?! ?/p>
const store = new Vue.Store({ state: { count: 1 }, mutations: { inctement (state) { state.count++ } } })
當(dāng)觸發(fā)一個(gè)類型為 increment 的 mutation 時(shí),調(diào)用此函數(shù)。”要喚醒一個(gè)
mutation handler,你需要以相應(yīng)的 type 調(diào)用 store.commit 方法
store.commit('increment')
提交載荷(Payload)
你可以向store.commit 傳入額外的參數(shù),即mutation 的載荷:
mutations: { increment (state, n) { state.count += n } } store.commit('increment', 10)
在大多數(shù)情況下,載荷應(yīng)該是一個(gè)對(duì)象,這樣可以包含多個(gè)字段并且記錄 mutation會(huì)更易讀?! ?/p>
mutations: { increment (state,payload) { state.count += payload.amount } } store.commit('increment', { amount:10 })
對(duì)象風(fēng)格的提交方式
提交mutation 的另一種方式直接使用包含 type 屬性的對(duì)象:
store.commit({ type: 'increment', amount:10 })
當(dāng)使用對(duì)象風(fēng)格的提交方式,整個(gè)對(duì)象作為載荷傳給mutation 函數(shù),因此handler保持不變:
mutations: { increment (state, payload) { state.count += payload.amount } }
Mutations 需遵守vue 的響應(yīng)規(guī)則
既然Vuex的store 中的狀態(tài)是響應(yīng)式的,那么當(dāng)我們變更狀態(tài)時(shí),監(jiān)視狀態(tài)的vue更新 ,這也意味值Vue 中的mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)。
1. 最好提前在你的store 中初始化好所有的所需要的屬性。
2.當(dāng)需要在對(duì)象上提交新屬性時(shí),你應(yīng)該使用
Vue.set(obj, 'newProp', 123)
使用新對(duì)象代替老對(duì)象 state.obj= {...state.obj ,newProp: 123}
使用常量替代 Mutation 事件類型
使用常量替代 mutation 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見(jiàn)的模式
export const SOME_MUTATION = 'SOME_MUTATION'; import Vuex from 'vuex' import {SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: {...} mutations: { // 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名 [SOME_MUTATION] (state) { // mutate state } } })
mutation 必須是同步函數(shù)
一條重要的原則是記住 mutation 必須是同步函數(shù)?! ?/p>
mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } }
在組件中提交 Mutations
你可以在組件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations輔助函數(shù)將組建中的methods 映射為 store.commit 調(diào)用 (需要在根節(jié)點(diǎn)注入 store)
import {mapMutations} from 'vuex' expor default { methods: { mapMutations([ methods: { mapMutations([ 'increment' // 映射 this.increment() 為 this.$store.commit('increment') ]), mapMutations({ add: 'increment' // 映射 this.add() 為 this.$store.commit('increment') }) } ]) } }
Actions
在mutation 中混異步調(diào)用會(huì)導(dǎo)致你的程序很難調(diào)試。
Actions
Action 類似于 mutation,不同在于。
Action 提交的是 mutation ,而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。
注冊(cè)一個(gè)簡(jiǎn)單的 action
const store = new Vuex.Store({ state: { count:0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context){ context.commit('increment') } } })
Action 函數(shù)接受一個(gè)與store 實(shí)例具有相同方法和屬性的context 對(duì)象,因此你可以調(diào)用 context.commit 提交一個(gè)mutation,或者通過(guò) context.state 和context.getters 來(lái)獲取 state 和 getters 當(dāng)我們?cè)谥蠼榻B到Modules時(shí),你就知道 context 對(duì)象為什么不是store 實(shí)例本身了?! ?/p>
actions: { increment({commit}){ commit('increment') } }
分發(fā) Action
Action 通過(guò) store.dispatch 方法觸發(fā):
store.dispatch('increment')
我們可以在 action 內(nèi)部執(zhí)行異步操作?! ?/p>
actions: { incrementAsync({commit}){ setTimeout(() => { commit('increment') },1000) } }
Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)
// 以載荷形式分發(fā) store.dispatch('incrementAsync',{ amount:10 }) // 以對(duì)象形式分發(fā) store.dispatch({ type: 'incrementAsync', amount:10 })
在組件中分發(fā) Action
你在組件中使用 this.$store.dispatch('xxx')
分發(fā) action,或者使用map Actions輔助函數(shù)將組件的methods 映射為store.dispatch 調(diào)用
import {mapActions } from 'vuex' export default{ methods:([ 'increment' // 映射 this.increment() 為 this.$store.dispatch('increment') ]) mapActions({ add: 'inctement' // 映射 this.add() 為 this.$store.dispatch('increment') }) }
組合 Actions
Action 通常是異步的,那么如何知道 action 什么時(shí)候結(jié)束。
你需要明白 store.dispatch 可以處理被處觸發(fā)的action 的回調(diào)函數(shù)返回的Promise并且 store.dispatch 仍舊返回Promise
actions: { actionA({commit}){ return new Promise((resolve)=>{ setTimeout (() => { commit('someMutation') resolve() },1000) }) } }
現(xiàn)在你可以
store.dispatch('actionA').then(()=>{ //... })
在另一個(gè) action 中也可以
actions: { actionB({dispath,commit}){ return dispatch('actionA').then(() => { commit('someOtherMutation') }) } }
我們利用async/ await
// 假設(shè) getData() 和 getOther() 返回的是一個(gè) Promis actions:{ async actionA ({commit}){ commit('gotData',await getData()) }, async actionB({dispatch,commit}){ await dispatch('actionA') // 等待 actionA 完成 commit('goOtherData', await getOtherData()) } }
Modules
使用單一狀態(tài)樹(shù),當(dāng)應(yīng)用變的很大的時(shí)候,store 對(duì)象會(huì)變的臃腫不堪。
Vuex 允許我們將store 分割到模塊。每一個(gè)模塊都有自己的state, mutation,action, getters, 甚至是嵌套子模塊從上到下進(jìn)行類似的分割?! ?/p>
const moduleA = { state: {...}, mutations: {...} actions: {...} getters:{...} } const moduleA = { 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)
模塊的局部狀態(tài)
對(duì)于模塊內(nèi)部的 mutation 和 getter, 接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)?! ?/p>
const moduleA = { state: {count:0}, mutations: { increment (state) { // state 模塊的局部狀態(tài) state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } }
同樣對(duì)于模塊內(nèi)部的action, context.state 是局部狀態(tài),根節(jié)點(diǎn)的窗臺(tái)石context.rootState:
const moduleA = { actions: { incrementIfOddOnRootSum ({state, commit ,rootState}) { if((state.count + rootState.count) %2 ===1){ commit('increment') } } } }
對(duì)于模塊內(nèi)部的getter,跟節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù):
const moduleA = { getters: { getters: { sumWithRootCount (state,getters,rootState) { return state.count + rootState.count } } } }
命名空間
模塊內(nèi)部的action, mutation , 和 getter 現(xiàn)在仍然注冊(cè)在全局命名空間 這樣保證了多個(gè)模塊能夠響應(yīng)同一 mutation 或 action. 也可以通過(guò)添加前綴 或者 后綴的
方式隔離各個(gè)模塊,以免沖突?! ?/p>
// 定義 getter, action , 和 mutation 的名稱為常量,以模塊名 ‘todo' 為前綴。 export const DONE_COUNT = 'todos/DONE_COUNT' export const FETCH_ALL = 'todos/FETCH_ALL' export const TOGGLE_DONE = 'todos/TOGGLE_DONE' import * as types form '../types' // 使用添加了解前綴的名稱定義, getter, action 和 mutation const todosModule = { state : {todo: []}, getters: { [type.DONE_COUNT] (state) { } } actions: { [types.FETCH_ALL] (context,payload) { } }, mutations: { [type.TOGGLE_DONE] (state, payload) } }
模塊動(dòng)態(tài)注冊(cè)
在store 創(chuàng)建之后,你可以使用 store.registerModule 方法注冊(cè)模塊?! ?/p>
store.registerModule('myModule',{})
模塊的狀態(tài)將是 store.state.myModule.
模塊動(dòng)態(tài)注冊(cè)功能可以使讓其他Vue 插件為了應(yīng)用的store 附加新模塊
以此來(lái)分割Vuex 的狀態(tài)管理。
項(xiàng)目結(jié)構(gòu)
Vuex 并不限制你的代碼結(jié)構(gòu)。但是它規(guī)定了一些需要遵守的規(guī)則:
1.應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè)store 對(duì)象中。
2.提交 mutation 是更改狀態(tài)的唯一方法,并且這個(gè)過(guò)程是同步的。
3.異步邏輯應(yīng)該封裝到action 里面。
只要你遵守以上規(guī)則,如何組織代碼隨你便。如果你的 store 文件太大,只需將 action、mutation、和 getters 分割到單獨(dú)的文件對(duì)于大型應(yīng)用,我們會(huì)希望把 Vuex 相關(guān)代碼分割到模塊中。下面是項(xiàng)目結(jié)構(gòu)示例
├── index.html ├── main.js ├── api │ └── ... # 抽取出API請(qǐng)求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我們組裝模塊并導(dǎo)出 store 的地方 ├── actions.js # 根級(jí)別的 action ├── mutations.js # 根級(jí)別的 mutation └── modules ├── cart.js # 購(gòu)物車模塊 └── products.js # 產(chǎn)品模塊
相關(guān)文章
vue使用keep-alive進(jìn)行組件緩存方法詳解(組件不緩存問(wèn)題解決)
keep-alive包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進(jìn)行組件緩存方法(組件不緩存問(wèn)題解決)的相關(guān)資料,需要的朋友可以參考下2022-09-09vue組件(全局,局部,動(dòng)態(tài)加載組件)
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素,封裝可重用的代碼。這篇文章主要介紹了vue組件(全局,局部,動(dòng)態(tài)加載組件),需要的朋友可以參考下2018-09-09聊聊vue集成sweetalert2提示組件的問(wèn)題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問(wèn)題,本文通過(guò)項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-11-11腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過(guò)程記錄
用vue-cli腳手架可以快速的構(gòu)建出一個(gè)前端vue框架的項(xiàng)目結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能
這篇文章主要介紹了elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能,本文給大家分享實(shí)現(xiàn)思路結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-07-07vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI,下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下。2017-12-12