Vuex

SimonMa 發(fā)布于2019-08-23 17:21 / 1765人閱讀

摘要：是什么是一個(gè)針對(duì)開(kāi)發(fā)的狀態(tài)管理模式。說(shuō)簡(jiǎn)單點(diǎn)兒就是一個(gè)工具，可以管理修改或設(shè)置所有組件用到的數(shù)據(jù)，而不需要借助之前的或者在組件間傳值。

Vuex是什么

Vuex是一個(gè)針對(duì)Vue.js開(kāi)發(fā)的狀態(tài)管理模式。說(shuō)簡(jiǎn)單點(diǎn)兒就是一個(gè)工具，可以管理（修改或設(shè)置）所有組件用到的數(shù)據(jù)，而不需要借助之前的event bus或者props在組件間傳值。

Vuex使用場(chǎng)景

大型單頁(yè)應(yīng)用程序，存在多組件共享數(shù)據(jù)的時(shí)候，需要用到
Vuex 核心內(nèi)容

store

(一個(gè)容器對(duì)象，存儲(chǔ)Vuex中的state,mutations,actions,getters等)

state (一個(gè)保存數(shù)據(jù)的對(duì)象，對(duì)象中的數(shù)據(jù)可以供所有組件使用)

// 1. 定義
const state = {
count: 0
}

// 2. 獲取state中的值
this.$store.state.count

// mapState 輔助函數(shù)獲取多個(gè)state的值
import { mapState } from "vuex"
computed: mapState({

// 箭頭函數(shù)可使代碼更簡(jiǎn)練
count: state => state.count,
// 傳字符串參數(shù) "count" 等同于 `state => state.count`
countAlias: "count",

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

// 3. 與組件的計(jì)算屬性混合使用
computed: {
localComputed () { / ... / },
// 使用對(duì)象展開(kāi)運(yùn)算符將此對(duì)象混入到外部對(duì)象中
...mapState({

// ...

})
}

mutations

(一個(gè)對(duì)象，保存的是更改state的函數(shù)，也只有它能更改state中的值，觸發(fā)方式this.$store.commit("函數(shù)名",參數(shù)))

// 1. 定義
const mutations = {
  increment (state) {
    state.count++
  }
}

// 2. 觸發(fā)
this.$store.commit("increment")

// 3. 傳遞參數(shù)，通常參數(shù)應(yīng)該是一個(gè)對(duì)象
mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit("increment", 10)

// 4. 在組件的方法中使用
  methods: {
    ...mapMutations([
      "increment", // 將 `this.increment()` 映射為 `this.$store.commit("increment")`

      // `mapMutations` 也支持載荷：
      "incrementBy" // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit("incrementBy", amount)`
    ]),
    ...mapMutations({
      add: "increment" // 將 `this.add()` 映射為 `this.$store.commit("increment")`
    })
  }

actions

(一個(gè)對(duì)象，保存的是觸發(fā)mutations的函數(shù)，讓mutations去修改state中的值)

// 1. 定義
const actions = {
  increment: ({ commit }) => commit("increment")
}

// 2. 觸發(fā)
this.$store.dispatch("increment")

// 3. 參數(shù)支持
this.$store.dispatch("incrementAsync", {
  amount: 10
})

// 4. 組件的方法中使用
  methods: {
    ...mapActions([
      "increment", // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`

      // `mapActions` 也支持載荷：
      "incrementBy" // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch("incrementBy", amount)`
    ]),
    ...mapActions({
      add: "increment" // 將 `this.add()` 映射為 `this.$store.dispatch("increment")`
    })
  }

getters

(一個(gè)對(duì)象，保存的是一些類似與計(jì)算屬性的函數(shù)，可以通過(guò)他們得到任何依賴于state的新的數(shù)據(jù))

// 1. 定義
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? "even" : "odd"
}

// 2. 使用
this.$store.getters.evenOrOdd

// 3. 使用其他getters作為參數(shù)
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

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

使用vuex

npm install vuex -S

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

// app.js
import store from "./store"

new Vue({
  el: "#app",
  store,
  render: h => h(Counter)
})