欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuex实现数据共享的方法

程序员文章站 2022-03-20 18:25:38
在用vue作为前端框架进行开发的时候,对于组件间的传值你一定不会陌生,如果只是简单的父子组件传值,我想你肯定不会选择用vuex来进行状态管理,但是如果你需要构建一个中大型单页应用,组件...

在用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实现过程更多点,敬请期待!