成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Codeing_ls / 2498人閱讀

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

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

首先我們?cè)?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對(duì)象
    state:{
        show:false,
        count:0
    }
})

再然后 , 在實(shí)例化 Vue對(duì)象時(shí)加入 store 對(duì)象 :

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

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

store.commit("increment")

console.log(store.state.count) // -> 1
State 在 Vue 組件中獲得 Vuex 狀態(tài)

從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)：

// 創(chuàng)建一個(gè) Counter 組件
const Counter = {
  template: `
{{ count }}
`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
mapState 輔助函數(shù)

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

// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from "vuex"

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

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

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

當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組:

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

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

Getter 接受 state 作為其第一個(gè)參數(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 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問這些值：

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

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

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

store.getters.doneTodosCount // -> 1

組件中使用：

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

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

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

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

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: "...", done: false }

注意，getter 在通過方法訪問時(shí)，每次都會(huì)去進(jìn)行調(diào)用，而不會(huì)緩存結(jié)果。

mapGetters 輔助函數(shù)

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

import { mapGetters } from "vuex"

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

如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：

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

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

注冊(cè)：

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

調(diào)用：

store.commit("increment")
提交載荷（Payload）

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

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit("increment", 10)

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

// ...
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 內(nèi)部執(zhí)行異步操作：

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

對(duì)象形式傳參：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97253.html

相關(guān)文章

  • Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

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

    DobbyKim 評(píng)論0 收藏0

  • 從頭開始學(xué)習(xí)Vuex

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

    不知名網(wǎng)友 評(píng)論0 收藏0

  • 從頭開始學(xué)習(xí)Vuex

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

    MadPecker 評(píng)論0 收藏0

  • 從頭開始學(xué)習(xí)Vuex

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

    I_Am 評(píng)論0 收藏0

  • vue 狀態(tài)管理（一）

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

    MiracleWong 評(píng)論0 收藏0

  • Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

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

    fai1017 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<