vuex說(shuō)明：

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

包含的內(nèi)容：

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

流程示意圖

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

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

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

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

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

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

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

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

安裝vuex

npm i vuex

新建文件夾store,建議目錄

Actions 和 mutation

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

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

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

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

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

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

//頁(yè)面中的操作(一、不帶參數(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ù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters

分發(fā)Action

//頁(yè)面中
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í)候檢測(cè)不到數(shù)據(jù)變化；

mutation 處理同步異步

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

頁(yè)面中操作

<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)頁(yè)面中的數(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)
  }
 }

頁(yè)面中

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檢測(cè)不到狀態(tài)樹中數(shù)據(jù)的變化，而actions可以處理同異步數(shù)據(jù)，可以在devtools檢測(cè)數(shù)據(jù)變化，這樣就好理解了

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

最新評(píng)論