vuex說明：

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

包含的內(nèi)容：

• state：驅(qū)動應(yīng)用的數(shù)據(jù)源；
• view:以生命方式將state映射到視圖；
• actions:響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化；

流程示意圖

但是，當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞：

多個視圖依賴于同一狀態(tài)。

來自不同視圖的行為需要變更同一狀態(tài)。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。

對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導(dǎo)致無法維護的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

另外，通過定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則，我們的代碼將會變得更結(jié)構(gòu)化且易維護。

適用于型單頁應(yīng)用

安裝vuex

npm i vuex

新建文件夾store,建議目錄

Actions 和 mutation

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

更改store中state值的唯一方法就是提交mutation，每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：

 mutations: {
  addNum(state) { 
   state.num ++
  }
}

你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷（payload）：在大多數(shù)情況下，載荷應(yīng)該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

 mutations: {
  addNum(state,Payload) { 
   state.num +=Payload.amount
  }
}

不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊：“當(dāng)觸發(fā)一個類型為 increment 的 mutation 時，調(diào)用此函數(shù)?！币獑拘岩粋€ mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

//頁面中的操作(一、不帶參數(shù))
 methods:{
  add(){
   this.$store.commit('addNum')
  }
 }
//二、帶參數(shù)的情況下
data(){
argument:{
 amount:10
},
methods:{
  add(){
   this.$store.commit('addNum',this.arguments)
  }
 }

actions

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作。

 mutations: {
  addNum(state,amount) {
   state.num +=amount
  },
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 },
 actions: {
  increment (context,args) {
      context.commit('addNum',args)
  }
 },
//另一種寫法
 actions: {
  increment ({commit},args) {
      commit('addNum',args)
  }
 }

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters

分發(fā)Action

//頁面中
methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  }
 },

區(qū)別：

action和mutation都可以改變state中數(shù)據(jù)的狀態(tài)，但是action可以處理異步函數(shù)可以在devtool中追蹤數(shù)據(jù)變化，而mutation只可以處理同步函數(shù)，當(dāng)處理異步函數(shù)的時候檢測不到數(shù)據(jù)變化；

mutation 處理同步異步

 mutations: {
//同步
  addNum(state,amount) {
   state.num +=amount
  },
//異步
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 }

頁面中操作

<template>
<div>
   <p @click="add">同步{{num}}</p>
  <p @click="reduce">異步{{count}}</p>
</div>
</template>
 methods:{
  //同步
  add(){
   this.$store.commit('increment',this.pa.amount)
  },
//異步
  reduce(){
   this.$store.commit('someMutation')
  }
 }

數(shù)據(jù)變化之前,瀏覽器中顯示,devtool中的數(shù)據(jù)狀態(tài)

當(dāng)頁面中的數(shù)據(jù)改變之后，追蹤數(shù)據(jù)

action 處理同步異步

 mutations: {
  addNum(state, amount) {
   state.num += amount
  },
  someMutation(state) {
    state.count-- 
  }
 },
 actions: {
  increment({commit}, args) {
   commit('addNum', args)
  },
  actionSomemution(context) {
   setTimeout(() => {
     context.commit('someMutation') 
   }, 1000)
  }
 }

頁面中

methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  },
  reduce(){
   this.$store.dispatch('actionSomemution')
  }
 },

數(shù)據(jù)變化之前，瀏覽器中顯示，與devtool中數(shù)據(jù)顯示

操作之后數(shù)據(jù)變化，

----

小結(jié)：mutation只能處理同步函數(shù)，在devtools檢測不到狀態(tài)樹中數(shù)據(jù)的變化，而actions可以處理同異步數(shù)據(jù)，可以在devtools檢測數(shù)據(jù)變化，這樣就好理解了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論