Vue.js狀態(tài)管理模式 Vuex

Codeing_ls 發(fā)布于2019-08-23 11:38 / 2535人閱讀

摘要：是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。通過方法觸發(fā)在內部執(zhí)行異步操作對象形式傳參以載荷形式分發(fā)

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

安裝、使用 vuex

首先我們在 vue.js 2.0 開發(fā)環(huán)境中安裝 vuex :

npm install vuex --save

然后 , 在 main.js 中加入 :

import vuex from "vuex"
Vue.use(vuex);
const store = new vuex.Store({//store對象
    state:{
        show:false,
        count:0
    }
})

再然后 , 在實例化 Vue對象時加入 store 對象 :

new Vue({
  el: "#app",
  router,
  store,//使用store
  template: "",
  components: { App }
})

現(xiàn)在，你可以通過 store.state 來獲取狀態(tài)對象，以及通過 store.commit 方法觸發(fā)狀態(tài)變更：

store.commit("increment")

console.log(store.state.count) // -> 1

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

從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)：

// 創(chuàng)建一個 Counter 組件
const Counter = {
  template: `{{ count }}`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 輔助函數(shù)

當一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性:

// 在多帶帶構建的版本中輔助函數(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
    }
  })
}

當映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給 mapState 傳一個字符串數(shù)組:

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

Getter

getters 和 vue 中的 computed 類似 , 都是用來計算 state 然后生成新的數(shù)據(jù) ( 狀態(tài) ) 的,就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算。

Getter 接受 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)
    }
  }
})

通過屬性訪問

Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值：

store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]

Getter 也可以接受其他 getter 作為第二個參數(shù)：

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

store.getters.doneTodosCount // -> 1

組件中使用：

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

注意，getter 在通過屬性訪問時是作為 Vue 的響應式系統(tǒng)的一部分緩存其中的。

通過方法訪問 通過方法訪問

你也可以通過讓 getter 返回一個函數(shù)，來實現(xiàn)給 getter 傳參。在你對 store 里的數(shù)組進行查詢時非常有用:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: "...", done: false }

注意，getter 在通過方法訪問時，每次都會去進行調用，而不會緩存結果。

mapGetters 輔助函數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性：

import { mapGetters } from "vuex"

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      "doneTodosCount",
      "anotherGetter",
      // ...
    ])
  }
}

如果你想將一個 getter 屬性另取一個名字，使用對象形式：

mapGetters({
  // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
  doneCount: "doneTodosCount"
})

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

注冊：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

調用：

store.commit("increment")

提交載荷（Payload）

你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的載荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit("increment", 10)

如果提交多個參數(shù)，必須使用對象的形式進行提交

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

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

注：mutations里的操作必須是同步的；

Action

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

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

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

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

store.dispatch("increment")

在 action 內部執(zhí)行異步操作：

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

對象形式傳參：

// 以載荷形式分發(fā)
store.dispatch("incrementAsync", {
  amount: 10
})

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/97253.html

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

摘要：有興趣的同學可以查看之前發(fā)布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網(wǎng)絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優(yōu)化。上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態(tài)管理模式——vuex。它類似于redux來應用的全局狀態(tài)。注：本...

DobbyKim 2019-08-21 15:52 評論0 收藏0
從頭開始學習Vuex

摘要：它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。頁面上，負責接收用戶操作等交互行為，執(zhí)行方法觸發(fā)對應進行回應。狀態(tài)改變提交操作方法。集中存儲中對象的零散數(shù)據(jù)，全局唯一，以進行統(tǒng)一的狀態(tài)管理。一、前言當我們的應用遇到多個組件共享狀態(tài)時，會需要多個組件依賴于同一狀態(tài)抑或是來自不同視圖的行為需要變更同一狀態(tài)。以前的解決辦法： a.將數(shù)據(jù)以及操作...

不知名網(wǎng)友 2019-08-29 17:02 評論0 收藏0
從頭開始學習Vuex

摘要：它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。頁面上，負責接收用戶操作等交互行為，執(zhí)行方法觸發(fā)對應進行回應。狀態(tài)改變提交操作方法。集中存儲中對象的零散數(shù)據(jù)，全局唯一，以進行統(tǒng)一的狀態(tài)管理。一、前言當我們的應用遇到多個組件共享狀態(tài)時，會需要多個組件依賴于同一狀態(tài)抑或是來自不同視圖的行為需要變更同一狀態(tài)。以前的解決辦法： a.將數(shù)據(jù)以及操作...

MadPecker 2019-08-02 11:46 評論0 收藏0
從頭開始學習Vuex

摘要：它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。頁面上，負責接收用戶操作等交互行為，執(zhí)行方法觸發(fā)對應進行回應。狀態(tài)改變提交操作方法。集中存儲中對象的零散數(shù)據(jù)，全局唯一，以進行統(tǒng)一的狀態(tài)管理。一、前言當我們的應用遇到多個組件共享狀態(tài)時，會需要多個組件依賴于同一狀態(tài)抑或是來自不同視圖的行為需要變更同一狀態(tài)。以前的解決辦法： a.將數(shù)據(jù)以及操作...

I_Am 2019-08-23 12:29 評論0 收藏0
vue 狀態(tài)管理（一）

摘要：在中添加原型屬性通過實現(xiàn)任意組件傳遞參數(shù)在掛載聲明周期函數(shù)中監(jiān)聽自定義事件給傳遞數(shù)據(jù)由觸發(fā)一個事件，在接收數(shù)據(jù)的組件中監(jiān)聽該事件狀態(tài)管理隨著組件的增加，通過以上方式共享數(shù)據(jù)，會越來越復雜，提供了狀態(tài)管理插件。 vue 狀態(tài)管理（一）父子組件之間往往使用props和 $emit 實現(xiàn)數(shù)據(jù)共享，任意組件可通過bus（一個vue實例）作為橋梁，實現(xiàn)數(shù)據(jù)共享。當項目中組件越來越...

MiracleWong 2019-08-23 18:09 評論0 收藏0
Vue學習日記（四）——Vue狀態(tài)管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

fai1017 2019-08-30 13:53 評論0 收藏0