vuex 使用文檔小結(jié)篇

更新時(shí)間：2018年01月11日 09:24:31 作者：檸檬先生

Vuex 是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，集中式存儲(chǔ)管理應(yīng)用的所有組件狀態(tài)。本文給大家介紹了vuex使用文檔，需要的朋友參考下吧

Vuex是什么？

Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(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)中，您必須顯式地通過Vue.use() 來安裝Vuex?！　?/p>

import Vue from 'vue'
　　import Vuex from 'vuex'
　　Vue.use(Vuex)

　　Vuex 是一個(gè)專為Vue.js 應(yīng)用程序開發(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 上的用戶書輸入導(dǎo)致的狀態(tài)變化。

幫助我們管理共享狀態(tài)，中大型單頁面應(yīng)用。

　　state

　　　　單一狀態(tài)樹，Vuex使用單一狀態(tài)樹用一個(gè)對象就包含了全部的應(yīng)用層級(jí)狀態(tài)。

　　　　在Vue 組件中獲得Vuex 狀態(tài)。

　　　　由于Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，從store 實(shí)例中讀取狀態(tài)最簡單的方法

　　　　就是在計(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 通過 store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件『注入』到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）：　　　　　

　const app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　// 把 store 對象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所 有的子組件
　　　　　　　　store,
　　　　　　　　components: {Counter},
　　　　　　template: '
　　　　　　　　<div class="app">
　　　　　　　　　　<counter></counter>
　　　　　　　　</div>
　　　　　　　　'
　　　　　　})

　　通過在根實(shí)例中注冊 store 選項(xiàng)，該store 實(shí)例會(huì)注冊入到跟組件下的所有子組件，且子組件能通過 this.$store 訪問到。更新 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è)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性?！　　　　　?/p>

// 在單獨(dú)構(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
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　})
　　　　　　　　　}

　　　　當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。　　　　　　　　　　

computed: mapState([
　　　　　　　　　　　　// 映射 this.count 為 store.state.count
　　　　　　　　　　　　'count'
　　　　　　　　　　])

　　　　組件仍然保有局部狀態(tài)。

　　　　Getters

　　　　　　有時(shí)候我們需要從store 中的state 中的state 中派生一些狀態(tài)，列如對列表進(jìn)行過濾并計(jì)算?！?/p>

　　　　computed: {
　　　　　　　　doneTodosCount() {
　　　　　　　　　　　　return this.$store.state.todos.filter(todo => todo.done).length
　　　　　　　　}
　　　　　　}

　　　　Vuex 允許我們再store 中定義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 對象：　　　

　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ì)算屬性。　　　　　　

import {mapGetter} form 'vuex'
　　　　　　export default {
　　　　　　　　computed: {
　　　　　　　　　　// 使用對象展開運(yùn)算符將 getters 混入
　　　　　　　　　　...mapGetters([
　　　　　　　　　　　　　　‘doneTodosCount',
　　　　　　　　　　　　　　'anotherGetter'
　　　　　　　　　　　　])
　　　　　　　　　　}
　　　　　　　　}

　　如果你想講一個(gè)getter 屬性另取名字，使用對象性時(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ù)。　　　　

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è)對象，這樣可以包含多個(gè)字段并且記錄 mutation會(huì)更易讀?！　　　　?/p>

mutations: {
　　　　　　increment (state,payload) {
　　　　　　　　state.count += payload.amount
　　　　　　　　}
　　　　　　}
　　　　　　store.commit('increment', {
　　　　　　　　amount:10
　　　　})

　　對象風(fēng)格的提交方式

　　　　提交mutation 的另一種方式直接使用包含 type 屬性的對象：　　　　

　store.commit({
　　　　　　　　type: 'increment',
　　　　　　　　amount:10
　　　　　　})

　　當(dāng)使用對象風(fēng)格的提交方式，整個(gè)對象作為載荷傳給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)需要在對象上提交新屬性時(shí)，你應(yīng)該使用　　　　　　　　

Vue.set(obj, 'newProp', 123)

　　　　　　使用新對象代替老對象 state.obj= {...state.obj ,newProp: 123}

　　　　　　使用常量替代 Mutation 事件類型

　　　　　　使用常量替代 mutation 事件類型在各種 Flux 實(shí)現(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 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名
　　　　　　　　　　　　[SOME_MUTATION] (state) {
　　　　　　　　　　　　// mutate state
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　})

mutation 必須是同步函數(shù)

　　　　一條重要的原則是記住 mutation 必須是同步函數(shù)。　　　　　　　

　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 可以包含任意異步操作。

　　　　注冊一個(gè)簡單的 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 對象，因此你可以調(diào)用 context.commit 提交一個(gè)mutation,或者通過 context.state 和context.getters 來獲取 state 和 getters 當(dāng)我們在之后介紹到Modules時(shí)，你就知道 context 對象為什么不是store 實(shí)例本身了?！　　?/p>

actions: {
　　　　　　increment({commit}){
　　　　　　　　commit('increment')
　　　　　　}
　　　　}

分發(fā) Action

　　　　Action 通過 store.dispatch 方法觸發(fā)：　　　　

store.dispatch('increment')

　　　　我們可以在 action 內(nèi)部執(zhí)行異步操作。　　　

　actions: {
　　　　　　incrementAsync({commit}){
　　　　　　　　setTimeout(() => {
　　　　　　　　　　commit('increment')
　　　　　　　　},1000)
　　　　　　　　}
　　　　　　}

　　Actions 支持同樣的載荷方式和對象方式進(jìn)行分發(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 什么時(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)樹，當(dāng)應(yīng)用變的很大的時(shí)候，store 對象會(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)

　　　　對于模塊內(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
　　　　　　　　}
　　　　　　}
　　　　}

　　同樣對于模塊內(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')
　　　　　　　　　　}
　　　　　　　　　}
　　　　　　　　}
　　　　　　}

對于模塊內(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)在仍然注冊在全局命名空間這樣保證了多個(gè)模塊能夠響應(yīng)同一 mutation 或 action. 也可以通過添加前綴或者后綴的

　　　　　　方式隔離各個(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)注冊

　　　　在store 創(chuàng)建之后，你可以使用 store.registerModule 方法注冊模塊?！　　　　?/p>

store.registerModule('myModule',{})

　　　　　　模塊的狀態(tài)將是 store.state.myModule.

　　　　　　模塊動(dòng)態(tài)注冊功能可以使讓其他Vue 插件為了應(yīng)用的store 附加新模塊

　　　　　　以此來分割Vuex 的狀態(tài)管理。

　　　　項(xiàng)目結(jié)構(gòu)

　　　　　　Vuex 并不限制你的代碼結(jié)構(gòu)。但是它規(guī)定了一些需要遵守的規(guī)則：

　　　　　　　　1.應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè)store 對象中。

　　　　　　　　2.提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過程是同步的。

　　　　　　　　3.異步邏輯應(yīng)該封裝到action 里面。

　　　　　　　　　　只要你遵守以上規(guī)則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation、和 getters 分割到單獨(dú)的文件對于大型應(yīng)用，我們會(huì)希望把 Vuex 相關(guān)代碼分割到模塊中。下面是項(xiàng)目結(jié)構(gòu)示例

├── index.html
├── main.js
├── api │ 
　　└── ... # 抽取出API請求
├── components
│ ├── App.vue
│ └── ...
└── store 
　　├── index.js  # 我們組裝模塊并導(dǎo)出 store 的地方 
　　├── actions.js  # 根級(jí)別的 action 
　　├── mutations.js  # 根級(jí)別的 mutation 
　　└── modules  
　　 　　├── cart.js  # 購物車模塊  
　　　　└── products.js # 產(chǎn)品模塊

您可能感興趣的文章: