Vuex实现数据共享的方法
人气:0在用vue作为前端框架进行开发的时候,对于组件间的传值你一定不会陌生,如果只是简单的父子组件传值,我想你肯定不会选择用Vuex来进行状态管理,但是如果你需要构建一个中大型单页应用,组件间数据交互比较复杂频繁,你很可能会考虑如何更好地在组件外部管理状态,那么Vuex 将会成为自然而然的选择。
Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这是官方的一种说法。
用个人的话总结下: Vuex就是为了实现多组件数据共享,从而建立一个叫store的数据管理库,将需要共享的数据存放在里面,在需要的地方可以取出来作为初始数据,也可以在组件内通过dispatch或者提交commit方法来改变该原始数据状态,从而实现的data的共享。
Vuex的核心
1、 State
Vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过this.$store.state
来获取我们定义的数据。
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { number: 0 } export default new Vuex.Store({ state, });
在页面中通过this.$store.state.number
即可获取到当前的值。
2、Getter
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数:
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { number: 0 } const getters = { getNumber(state) { return state.number + 1 } } export default new Vuex.Store({ state, getters, });
在页面你可以用两种方式取到getters里面的值
1、通过属性访问
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值 如: this.$store.getters.getNumber
Getter 也可以接受其他 getter 作为第二个参数:
const state = { number: 1 } const getters = { getNumber(state) { return state.number + 1 // 2 }, getDoubNUmber(state, getters) { return state.number + getters.getNumber // 3 } }
注意: getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。
2、 通过方法访问
你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
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) } } export default new Vuex.Store({ state, getters, });
注意, getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果 this.$store.getters.filterNumber(3)
3、Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方, 并且它会接受 state 作为第一个参数 , 提交载荷(payload) 作为额外的参数 ,并且在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且使记录的 mutation 会更易读:
你可以这样写:
const mutations = { increment(state, n) { state.number += n } }
但你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
this.$store.commit('increment', 1)
也可以这样写:
const mutations = { increment(state, payload) { state.number += payload.count } }
然后:
使用 this.$store.commit('increment', {count: 1})
提交,
// 或者另一种方式是直接使用包含 type 属性的对象进行提交: this.$store.commit({ type: 'increment', count: 1 })
特别说明:在 Vuex 中,mutation 都是同步任务:为了处理异步操作,让我们来看一看 Action。
4、 Action
Action 类似于 mutation,不同在于:
1、Action 提交的是 mutation,而不是直接变更状态。
2、Action 可以包含任意异步操作。
虽然在页面中通过提交commit是可以达到修改store中状态值的目的,但是官方并不建议我们这样做,而是让我们去提交一个action,在action中提交mutation再去修改状态值。
const mutations = { increment(state) { state.number += 1 } } const actions = { addNumber(context){ context.commit('increment') } }
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实现过程更多点,敬请期待!
您可能感兴趣的文章:
- Vuex的API文档说明详解
- Vuex模块化应用实践示例
- 浅谈vuex为什么不建议在action中修改state
- vuex+axios+element-ui实现页面请求loading操作示例
- 一看就会的vuex实现登录验证(附案例)
- Vue-CLI与Vuex使用方法实例分析
- 使用vuex较为优雅的实现一个购物车功能的示例代码
- VUEX-action可以修改state吗
- vue-router结合vuex实现用户权限控制功能
- 解决vuex数据异步造成初始化的时候没值报错问题
- VUEX 数据持久化,刷新后重新获取的例子
- 实现vuex与组件data之间的数据同步更新方式
- vuex管理状态 刷新页面保持不被清空的解决方案
- vuex实现数据状态持久化
- vuex存储token示例
- Vuex实现数据增加和删除功能
- VUE:vuex 用户登录信息的数据写入与获取方式
- Vue的状态管理vuex使用方法详解
加载全部内容