Vuex实现数据共享的方法

更新时间：2019年12月20日 09:43:10 作者：高山低谷

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了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实现过程更多点，敬请期待！

您可能感兴趣的文章:

Vuepress使用vue组件实现页面改造
这篇文章主要为大家介绍了Vuepress使用vue组件实现页面改造示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vuex中五大属性和使用说明(包括辅助函数)
这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue+element-ui添加自定义右键菜单的方法示例
这篇文章主要给大家介绍了关于Vue+element-ui添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
这篇文章主要介绍了vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue项目开启gzip压缩功能简单实例
这篇文章主要给大家介绍了关于vue项目开启gzip压缩功能的相关资料,gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
vue实现web滚动条分页
这篇文章主要为大家详细介绍了vue实现web滚动条分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Element 的 el-table 表格实现单元格合并功能
这篇文章主要介绍了Element 的 el-table 表格实现单元格合并功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2024-07-07
vue中数组加Key方式
这篇文章主要介绍了vue中数组加Key方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue两个版本的区别和使用方法(更深层次了解)
在我们使用 vue时，我们可以引用两个不同版本的 Vue，分别是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它们的区别是什么呢，今天我们就来分析下这两个不同版本之间的区别，一起看看吧
2020-02-02
Vue项目打包、合并及压缩优化网页响应速度
网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下
2021-07-07

Vuex实现数据共享的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具