小編給大家分享一下vuex使用文檔的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、網(wǎng)站建設(shè)、北京網(wǎng)絡(luò)推廣、小程序設(shè)計、北京網(wǎng)絡(luò)營銷、北京企業(yè)策劃、北京品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供北京建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：jinyejixie.com

Vuex是什么？

Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(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)出等高級調(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。

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

Vuex 是一個專為Vue.js 應(yīng)用程序開發(fā) 的狀態(tài)管理模式，集中式存儲管理應(yīng)用的所有組件狀態(tài)。

狀態(tài)管理包含以下幾個部分狀態(tài)：

state 驅(qū)動應(yīng)用的數(shù)據(jù)源；

  　　　　view 以生命方式將 state 映射到視圖。

   　　　　actions  響應(yīng)在view 上的用戶書輸入導(dǎo)致的狀態(tài)變化。

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

 　　state

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

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

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

就是在計算屬性中返回某個狀態(tài)。

創(chuàng)建一個Counter 組件　

　const Counter = {
　　　　　　　　template: '<div>{{ count }}</div>'
　　　　　　　　computed: {
　　　　　　　　　　count ()｛
　　　　　　　　　　　　return store.state.count
　　　　　　　　　?。?
　　　　　　　　}
　　　　　　}

每次 store.state.count 變化的時候，都會重新求取計算屬性，并且觸發(fā)更新相關(guān)的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ù)

當(dāng)一個組件需要獲取多個狀態(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
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　})
　　　　　　　　　}

當(dāng)映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給 mapState 傳一個字符串?dāng)?shù)組?！　　　　　　　?/p>

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

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

Getters

有時候我們需要從store 中的state 中 的state 中派生一些狀態(tài)，列如對列表進行過濾并計算。　

　　　　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++
　　　　　　　　}
　　　　　　}
　　　　})

 　　當(dāng)觸發(fā)一個類型為 increment 的 mutation 時，調(diào)用此函數(shù)。”要喚醒一個

 　　　　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)該是一個對象，這樣可以包含多個字段并且記錄 mutation會更易讀?！　　?/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)格的提交方式，整個對象作為載荷傳給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)時，監(jiān)視狀態(tài)的vue更新 ，這也意味值Vue 中的mutation 也需要與使用 Vue 一樣遵守一些注意事項。

1. 最好提前在你的store 中初始化好所有的所需要的屬性。

2.當(dāng)需要在對象上提交新屬性時，你應(yīng)該使用　　　　　　

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 風(fēng)格的計算屬性命名功能來使用一個常量作為函數(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)用會導(dǎ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 當(dāng)我們在之后介紹到Modules時，你就知道 context 對象為什么不是store 實例本身了。　

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　

// 假設(shè) 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)樹，當(dāng)應(yīng)用變的很大的時候，store 對象會變的臃腫不堪。

Vuex 允許我們將store 分割到模塊。每一個模塊都有自己的state, mutation,action, getters, 甚至是嵌套子模塊從上到下進行類似的分割。　　　

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)在仍然注冊在全局命名空間    這樣保證了多個模塊能夠響應(yīng)同一 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 插件為了應(yīng)用的store 附加新模塊

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

項目結(jié)構(gòu)

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

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

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

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

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

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

以上是“vuex使用文檔的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：vuex使用文檔的示例分析
文章地址：http://jinyejixie.com/article28/pgeojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站收錄、建站公司、標(biāo)簽優(yōu)化、定制網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)