Vue.js狀態管理模式 Vuex

Codeing_ls 發布于2019-08-23 11:38 / 2489人閱讀

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

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

安裝、使用 vuex

首先我們在 vue.js 2.0 開發環境中安裝 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 }
})

現在，你可以通過 store.state 來獲取狀態對象，以及通過 store.commit 方法觸發狀態變更：

store.commit("increment")

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

State 在 Vue 組件中獲得 Vuex 狀態

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

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

mapState 輔助函數

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

// 在多帶帶構建的版本中輔助函數為 Vuex.mapState
import { mapState } from "vuex"

export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 "count" 等同于 `state => state.count`
    countAlias: "count",

    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

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

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

Getter

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

Getter 接受 state 作為其第一個參數：

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 作為第二個參數：

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

store.getters.doneTodosCount // -> 1

組件中使用：

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

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

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

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

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

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

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

mapGetters 輔助函數

mapGetters 輔助函數僅僅是將 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 中的狀態的唯一方法是提交 mutation。

注冊：

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

調用：

store.commit("increment")

提交載荷（Payload）

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

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

store.commit("increment", 10)

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

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

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

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

Action

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態。

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

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

Action 通過 store.dispatch 方法觸發：

store.dispatch("increment")

在 action 內部執行異步操作：

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

對象形式傳參：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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