vuex 使用文檔小結(jié)篇
Vuex是什么？
Vuex 是一個專為 Vue.js應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。Vuex 也集成到Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel調(diào)試、狀態(tài)快照導入導出等高級調(diào)試功能。
安裝
直接下載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 驅(qū)動應用的數(shù)據(jù)源；
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)從根組件『注入』到每一個子組件中（需調(diào)用 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>
// 在單獨構(gòu)建的版本中輔助函數(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ù)組?！ ?/p>
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ù)。
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 都有一個字符串的 事件類型 和回調(diào)函數(shù)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方。并且他會接受 state 作為第一個參數(shù)?！ ?/p>
const store = new Vue.Store({
state: {
count: 1
},
mutations: {
inctement (state) {
state.count++
}
}
})
當觸發(fā)一個類型為 increment 的 mutation 時，調(diào)用此函數(shù)?！币獑拘岩粋€
mutation handler，你需要以相應的 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ù)情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄 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 調(diào)用 (需要在根節(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 中混異步調(diào)用會導致你的程序很難調(diào)試。
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 對象，因此你可以調(diào)用 context.commit 提交一個mutation,或者通過 context.state 和context.getters 來獲取 state 和 getters 當我們在之后介紹到Modules時，你就知道 context 對象為什么不是store 實例本身了?！ ?/p>
actions: {
increment({commit}){
commit('increment')
}
}
分發(fā) Action
Action 通過 store.dispatch 方法觸發(fā)：
store.dispatch('increment')
我們可以在 action 內(nèi)部執(zhí)行異步操作?！ ?/p>
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 調(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 什么時候結(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(()=>{
//...
})
在另一個 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)
對于模塊內(nèi)部的 mutation 和 getter, 接收的第一個參數(shù)是模塊的局部狀態(tài)。
const moduleA = {
state: {count:0},
mutations: {
increment (state) {
// state 模塊的局部狀態(tài)
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}
同樣對于模塊內(nèi)部的action, context.state 是局部狀態(tài)，根節(jié)點的窗臺石context.rootState:
const moduleA = {
actions: {
incrementIfOddOnRootSum ({state, commit ,rootState}) {
if((state.count + rootState.count) %2 ===1){
commit('increment')
}
}
}
}
對于模塊內(nèi)部的getter,跟節(jié)點狀態(tài)會作為第三個參數(shù)：
const moduleA = {
getters: {
getters: {
sumWithRootCount (state,getters,rootState) {
return state.count + rootState.count
}
}
}
}
命名空間
模塊內(nèi)部的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)管理。
項目結(jié)構(gòu)
Vuex 并不限制你的代碼結(jié)構(gòu)。但是它規(guī)定了一些需要遵守的規(guī)則：
1.應用層級的狀態(tài)應該集中到單個store 對象中。
2.提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的。
3.異步邏輯應該封裝到action 里面。
只要你遵守以上規(guī)則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation、和 getters 分割到單獨的文件對于大型應用，我們會希望把 Vuex 相關代碼分割到模塊中。下面是項目結(jié)構(gòu)示例
├── index.html ├── main.js ├── api │ └── ... # 抽取出API請求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我們組裝模塊并導出 store 的地方 ├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation └── modules ├── cart.js # 購物車模塊 └── products.js # 產(chǎn)品模塊
相關文章
作為一個全棧開發(fā)人員,前端UI框架和網(wǎng)絡請求都得有基本的掌握,我以最簡潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05
vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關資料,需要的朋友可以參考下2022-09-09
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項目案例實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了jenkins自動化部署vue，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
腳手架(vue-cli)創(chuàng)建Vue項目的超詳細過程記錄
用vue-cli腳手架可以快速的構(gòu)建出一個前端vue框架的項目結(jié)構(gòu),下面這篇文章主要給大家介紹了關于腳手架(vue-cli)創(chuàng)建Vue項目的超詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下2022-10-10
elementui實現(xiàn)表格(el-table)默認選中功能
這篇文章主要介紹了elementui實現(xiàn)表格(el-table)默認選中功能,本文給大家分享實現(xiàn)思路結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-07-07
vue + element-ui實現(xiàn)簡潔的導入導出功能
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應框架是 Mint UI，下面這篇文章主要給大家介紹了關于利用vue + element-ui如何實現(xiàn)簡潔的導入導出功能的相關資料，需要的朋友可以參考下。2017-12-12