搜尋
首頁web前端js教程vuex之詳細介紹中文文檔

Vuex 是一個專為Vue.js應用程式開發的狀態管理模式,集中式儲存管理應用程式的所有元件狀態。本文為大家介紹了vuex使用文檔,需要的朋友參考下吧

Vuex是什麼?

Vuex 是專為 Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式變更。 Vuex 也整合到Vue 的官方調試工具 devtools extension,提供了諸如零配置的 time-travel調試、狀態快照導入導出等高級調試功能。

安裝

直接下載CDN 引用

  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vuex.js"></script>

npm 

npm install vuex --save

在一個模組化的打包系統中,您必須明確地透過Vue.use() 來安裝Vuex。  

import Vue from &#39;vue&#39;
  import Vuex from &#39;vuex&#39;
  Vue.use(Vuex)

  Vuex 是一個專為Vue.js 應用程式開發 的狀態管理模式,集中式儲存管理應用的所有元件狀態。

  狀態管理包含以下幾個部分狀態:

     state 驅動應用的資料來源;

      view 以生命方式將 state 對應到檢視。

       actions  因應在view 上的使用者書籍輸入而導致的狀態變化。

 幫助我們管理共享狀態,中大型單一頁面應用程式。

   state

    單一狀態樹 ,Vuex使用單一狀態樹用一個物件就包含了全部的應用層級狀態。

    在Vue 元件中獲得Vuex 狀態。

    由於Vuex的狀態儲存是響應式的,從store 實例中讀取狀態最簡單的方法

    就是在計算屬性中傳回某個狀態。

    建立一個Counter 元件

 const Counter = {
        template: &#39;<p>{{ count }}</p>&#39;
        computed: {
          count (){
            return store.state.count
          }
        }
      }

  每次store.state.count 變化的時候,都會重新求取計算屬性,並且觸發更新相關的DOM

    透過 Vuexstore 透過 Vuexstore 透過 Vuexstore選項,提供了一個機制將狀態從根元件『注入』到每個子元件中(需呼叫Vue.use(Vuex)):     

 const app = new Vue({
        el:&#39;#app&#39;,
        // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所 有的子组件
        store,
        components: {Counter},
      template: &#39;
        <p class="app">
          <counter></counter>
        </p>
        &#39;
      })

   透過在根實例中註冊store 選項,該store實例會註冊入到跟組件下的所有子元件,且子元件能透過this.$store 存取。更新counter 的實作:     

 const Counter = {
        template : &#39;<p>{{ count }}</p>&#39;,
        computed: {
          count this.$store.state.count
          }
      }

    mapState 輔助函數

     輔助函數

    當一個狀態屬性會有些冗餘。

      為了解決這個問題,我們可以使用 mapState 輔助函數來幫助我們產生計算屬性。      

// 在单独构建的版本中辅助函数为 Vuex.mapState
      import { mapState } from &#39;vuex&#39;
        export default {
          computed: mapState({
            // 箭头函数可以使代码更简洁
              count: state => state.count,
            // 传字符串参数 ‘count&#39; 等同于 ‘state => state.count&#39;
              countAlias: &#39;count&#39;,
            // 为了能够使用 ‘this&#39; 获取局部状态,必须使用常规函数
              countPlusLocalState(state) {
                  return state.count + this.localCount
                }
            })
         }

    當映射的計算屬性的名稱與 state 的子節點名稱相同時,我們也可以給 mapState 傳一個字串數組。          

computed: mapState([
            // 映射 this.count 为 store.state.count
            &#39;count&#39;
          ])

    組件仍保有局部狀態。

    Getters

      有時候我們需要從store 中的state 中 的state 中派生一些狀態,列如對列表進行過濾併計算。 

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

    Vuex 允許我們再store 中定義getters (可以認為是stroe 的計算屬性)

      Getters 接受其第一個參數。

const store = new Vuex.Store({
            state: {
              todos:[
                {id:1, text: &#39;...&#39; ,done: true},
                {id:2,text:&#39;...&#39;,done: false}
              ]
            },
          getters: {
            doneTodos: state => {
                return state.todos.filter(todo=> todo.done)
              }
            }
          })

    Getters 會暴露為store.getters 物件:   

 store.getters.doneTodos // [{id:1,text: &#39;...&#39;,done:true}]

    Getter 也可以接受其他可#        的在任何組件中使用

getters: {
          doneTodosCount: (state,getters) => {
            return getters.doneTodos.length
          }
      }
    store.getters.doneTodosCount // -> 1

    mapGetters 輔助函數

    mapGetters 輔助函數只是store 中的getters 對應到局部計算屬性。

 computed: {
          doneTodosCount() {
            return this.$store.getters.doneTodosCount
        }
      }

   如果你想講一個getter 屬性另取名字,使用物件性時

import {mapGetter} form &#39;vuex&#39;
      export default {
        computed: {
          // 使用对象展开运算符将 getters 混入
          ...mapGetters([
              ‘doneTodosCount&#39;,
              &#39;anotherGetter&#39;
            ])
          }
        }

          M           M  問題        M 總狀態的狀態下所更改的狀態#  Vuex中的mutation

        非常類似事件,每個mutation 都有一個字串的事件類型和回呼函數。這個回呼函數就是我們實際進行狀態變更的地方。而他會接受 state 作為第一個參數。    

mapGetters({
         // 映射 this.doneCount 为 store.getters.doneTodosCount
          doneCount: &#39;doneTodosCount&#39;
      })

   當觸發一個類型為 increment 的 mutation 時,呼叫此函數。 「要喚醒一個

     mutation handler,你需要以對應的type 呼叫store.commit 方法      

const store = new Vue.Store({
        state: {
            count: 1
        },
      mutations: {
          inctement (state) {
          state.count++
        }
      }
    })

 Pay     

store.commit(&#39;increment&#39;)

 傳入額外的參數,即mutation 的負載:            

mutations: {
          increment (state, n) {
          state.count += n
        }
      }
      store.commit(&#39;increment&#39;, 10)

   在大多數情況下,負載應該是一個對象,這樣可以包含多個字段並且記錄mutation會更易讀。

mutations: {
      increment (state,payload) {
        state.count += payload.amount
        }
      }
      store.commit(&#39;increment&#39;, {
        amount:10
    })

  对象风格的提交方式

    提交mutation 的另一种方式直接使用包含 type 属性的对象:    

 store.commit({
        type: &#39;increment&#39;,
        amount:10
      })

  当使用对象风格的提交方式,整个对象作为载荷传给mutation 函数,因此handler保持不变:     

 mutations: {
        increment (state, payload) {
          state.count += payload.amount
        }
       }

  Mutations 需遵守vue 的响应规则

    既然Vuex的store 中的状态是响应式的,那么当我们变更状态时,监视状态的vue更新 ,这也意味值Vue 中的mutation 也需要与使用 Vue 一样遵守一些注意事项。

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

      2.当需要在对象上提交新属性时,你应该使用        

Vue.set(obj, &#39;newProp&#39;, 123)

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

      使用常量替代 Mutation 事件类型

      使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式     

export const SOME_MUTATION = &#39;SOME_MUTATION&#39;;
      import Vuex from &#39;vuex&#39;
      import {SOME_MUTATION } from &#39;./mutation-types&#39;
      const store = new Vuex.Store({
          state: {...}
          mutations: {
            // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
            [SOME_MUTATION] (state) {
            // mutate state
            }
          }
      })

mutation 必须是同步函数

    一条重要的原则是记住 mutation 必须是同步函数。       

 mutations: {
          someMutation (state) {
            api.callAsyncMethod(() => {
                state.count++
            })
          }
        }

 在组件中提交 Mutations

    你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations辅助函数将组建中的methods 映射为 store.commit 调用 (需要在根节点注入 store)    

import {mapMutations} from 'vuex'
      expor default {
        methods: {
          mapMutations([
              methods: {
                mapMutations([
                  'increment' // 映射 this.increment() 为 this.$store.commit(&#39;increment&#39;)
          ]),
        mapMutations({
              add: 'increment' // 映射 this.add() 为 this.$store.commit(&#39;increment&#39;)
          })
        }
      ])
      }
    }

Actions  

    在mutation 中混异步调用会导致你的程序很难调试。

Actions

    Action 类似于 mutation,不同在于。

    Action 提交的是 mutation ,而不是直接变更状态。

    Action 可以包含任意异步操作。

    注册一个简单的 action    

const store = new Vuex.Store({
      state: {
          count:0
      },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
        increment (context){
          context.commit(&#39;increment&#39;)
          }
        }
    })

Action 函数接受一个与store 实例具有相同方法和属性的context 对象,因此你可以调用 context.commit 提交一个mutation,或者通过 context.state 和context.getters 来获取 state 和 getters 当我们在之后介绍到Modules时,你就知道 context 对象为什么不是store 实例本身了。   

actions: {
      increment({commit}){
        commit(&#39;increment&#39;)
      }
    }

分发 Action

    Action 通过 store.dispatch 方法触发:     

store.dispatch(&#39;increment&#39;)

    我们可以在 action 内部执行异步操作。   

 actions: {
      incrementAsync({commit}){
        setTimeout(() => {
          commit(&#39;increment&#39;)
        },1000)
        }
      }

  Actions 支持同样的载荷方式和对象方式进行分发    

 // 以载荷形式分发
    store.dispatch(&#39;incrementAsync&#39;,{
      amount:10
    })
    // 以对象形式分发
      store.dispatch({
        type: &#39;incrementAsync&#39;,
        amount:10
      })

 在组件中分发 Action

    你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用map Actions辅助函数将组件的methods 映射为store.dispatch 调用   

import {mapActions } from 'vuex'
      export default{
        methods:([
          'increment' // 映射 this.increment() 为 this.$store.dispatch(&#39;increment&#39;)
        ])
      mapActions({
          add: 'inctement' // 映射 this.add() 为 this.$store.dispatch(&#39;increment&#39;)
        })
      }

组合 Actions

    Action 通常是异步的,那么如何知道 action 什么时候结束。

    你需要明白 store.dispatch 可以处理被处触发的action 的回调函数返回的Promise并且 store.dispatch 仍旧返回Promise   

actions: {
        actionA({commit}){
        return new Promise((resolve)=>{
            setTimeout (() => {
              commit(&#39;someMutation&#39;)
              resolve()
            },1000)
          })
        }
      }

  现在你可以     

store.dispatch(&#39;actionA&#39;).then(()=>{
        //...
      })

  在另一个 action 中也可以  

actions: {
      actionB({dispath,commit}){
        return dispatch(&#39;actionA&#39;).then(() => { 
        commit(&#39;someOtherMutation&#39;)
      })
    }
    }

  我们利用async/ await   

// 假设 getData() 和 getOther() 返回的是一个 Promis
    actions:{
        async actionA ({commit}){
          commit(&#39;gotData&#39;,await getData())
        },
        async actionB({dispatch,commit}){
          await dispatch(&#39;actionA&#39;) // 等待 actionA 完成
          commit(&#39;goOtherData&#39;, await getOtherData())
        }
      }

    Modules

      使用单一状态树,当应用变的很大的时候,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 的状态
    store.state.b // -> moduleB 的状态

模块的局部状态

    对于模块内部的 mutation 和 getter, 接收的第一个参数是模块的局部状态。  

 const moduleA = {
          state: {count:0},
          mutations: {
            increment (state) {
                // state 模块的局部状态
                state.count++
            }
          },
      getters: {
        doubleCount (state) {
        return state.count * 2
        }
      }
    }

   同样对于模块内部的action, context.state 是局部状态,根节点的窗台石context.rootState:    

const moduleA = {
          actions: {
          incrementIfOddOnRootSum ({state, commit ,rootState}) {
            if((state.count + rootState.count) %2 ===1){
                commit(&#39;increment&#39;)
          }
         }
        }
      }

 对于模块内部的getter,跟节点状态会作为第三个参数:     

const moduleA = {
          getters: {
            getters: {
              sumWithRootCount (state,getters,rootState) {
                      return state.count + rootState.count
                }
              }
          }
        }

命名空间

    模块内部的action, mutation , 和 getter 现在仍然注册在全局命名空间    这样保证了多个模块能够响应同一 mutation 或 action. 也可以通过添加前缀 或者 后缀的

      方式隔离各个模块,以免冲突。     

// 定义 getter, action , 和 mutation 的名称为常量,以模块名 ‘todo&#39; 为前缀。
        export const DONE_COUNT = &#39;todos/DONE_COUNT&#39;
        export const FETCH_ALL = &#39;todos/FETCH_ALL&#39;
        export const TOGGLE_DONE = &#39;todos/TOGGLE_DONE&#39;
          import * as types form &#39;../types&#39;
    // 使用添加了解前缀的名称定义, getter, action 和 mutation
     const todosModule = {
        state : {todo: []},
        getters: {
          [type.DONE_COUNT] (state) {
          }
      }
    actions: {
        [types.FETCH_ALL] (context,payload) {
       }
      },
    mutations: {
        [type.TOGGLE_DONE] (state, payload)
      }
    }

模块动态注册

    在store 创建之后,你可以使用 store.registerModule 方法注册模块。     

store.registerModule(&#39;myModule&#39;,{})

      模块的状态将是 store.state.myModule.

      模块动态注册功能可以使让其他Vue 插件为了应用的store 附加新模块

      以此来分割Vuex 的状态管理。

    项目结构

      Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则:

        1.应用层级的状态应该集中到单个store 对象中。

        2.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

        3.异步逻辑应该封装到action 里面。

          只要你遵守以上规则,如何组织代码随你便。如果你的 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 # 产品模块

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用vue2.0如何实现前端星星评分功能组件

有关Vue打包map文件的问题

使用Node.js实现压缩和解压缩功能

以上是vuex之詳細介紹中文文檔的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)