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

