Vuex实现数据共享的方法(2)

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

addNumber( {commit} ){ commit('increment') }

以上这种写法等同于：

addNumber(context){ context.commit('increment') }

Action 通过 store.dispatch 方法触发：

this.$store.dispatch('addNumber')

同mutation 一样你也可以在action的时候传递参数

const mutations = { increment(state, number) { state.number += number } } const actions = { addNumber(context, number){ context.commit('increment', number) } 或者： addNumber( {commit}, number){ commit('increment', number) } }

触发方法： this.$store.dispatch('addNumber', 10)

关于在action 处理异步操作可以看下面这个例子：

const actions = { getData({commit}) { return new Promise((resolve, reject)=> { setTimeout(()=>{ commit('getList') resolve() }, 1000) }) } }

然后再

this.$store.dispatch('getData').then(() => { // ... })

完整 实例：

import Vue from "vue"; import Vuex from "vuex"; import { resolve, reject } from "any-promise"; Vue.use(Vuex); const state = { number: 1, list: [1, 2, 3, 4, 5] } const getters = { getNumber(state) { return state.number + 1 // 2 }, getDoubNumber(state, getters) { return state.number + getters.getNumber // 3 }, filterNumber:(state)=>(num)=> { return state.list.find(item=> item%num === 0) } } const mutations = { increment(state, n) { state.number += n }, getList(state) { state.list = state.list.forEach((item)=> item*2) } } const actions = { addNumber( {commit} , n){ commit('increment', n) }, getData({commit}) { return new Promise((resolve, reject)=> { setTimeout(()=>{ commit('getList') resolve() }, 1000) }) } } export default new Vuex.Store({ state, getters, mutations, actions });

关于 Vuex中mapState、mapGetters、mapMutations、mapActions的用法

要用 首先得引入：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

这玩意儿其实就是Vuex 内置的辅助函数，方便我们获取store里面的数据和方法

computed: { ...mapState([ 'number' ]) } // 使用对象展开运算符将 getter 混入 computed 对象中 computed: { ...mapGetters([ 'getNumber', 'getDoubNumber', // ... ]) } methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } methods: { ...mapActions([ 'addNumber', // 将 `this.addNumber()` 映射为 `this.$store.dispatch('addNumber')` // `mapActions` 也支持载荷： 'addNumber' // 将 `this.addNumber(amount)` 映射为 `this.$store.dispatch('addNumber', amount)` ]), ...mapActions({ requestData: 'getData' // 将 `this.requestData()` 映射为 `this.$store.dispatch('getData')` }) }

以上是对Vuex实现状态管理的一个整个过程的理解，参考官方文档，然后自己写一遍，比较容易明白其中的道理，后面有时间想写React里面关于Redux实现状态管理的一个过程，对比其中，其实他们思想差不多， 只不过redux实现过程更多点，敬请期待！

您可能感兴趣的文章: