详解Vue中状态管理Vuex

 更新时间:2017年05月11日 11:28:44   作者:qq_35534823  
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

在vuex出现之前,vue里面的状态是属于‘单向数据流'。举个官网的例子:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `<div>{{ count }} </div`,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

其中

  1. state是一个数据源
  2. view以声明的方式将state映射到视图
  3. actions 响应在view上的用户输入导致的状态变化

这里写图片描述

但是解决不了 多个组件共享状态

所以vuex应运而生

这里写图片描述

简单来说,就是共享的状态用state来存放,用mutations来操作state,但是需要用store.commit来主动式的操作mutations。

下面来单独介绍 state,getters,mutations,actions,modules

State

单一状态树

vuex使用单一状态树,那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源。

如何在组件中获得vuex状态?

由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态:

这个是store/state.js中声明的数据源

这里写图片描述

这个是在组件中进行的引用

这里写图片描述

不过需要注意的是,在组件中进行引用之前,需要先在入门文件中进行注入
即:

这里写图片描述

如果不在根实例中注册store选项的话,那么需要在每一个使用state的组件中都要导入。

注册之后,子组件只需要this.$store即可调用vuex。

Getters

有时候我们需要从state中派生出一些状态,比如筛选一组列表,并且这个筛选后的数据是有其他组件要用的。那么我们就需要把这个结果进行包装,形成共享状态。

例如:

computed:{
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果说这个length是其他组件用的话,那么如何做呢?

Getter就这样应运而生了。

getters: {
  doneTodosCount: state => {
    return state.todos.filter(todo => todo.done).length
  }
}

Getter 会暴露为store.getters对象

所以很容易在任何组件中使用它:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

这是getters.js

这里写图片描述

这是组件中的引用

这里写图片描述

Mutations

更改Vuex的store中的状态的唯一方法就是提交mutations。

Vuex中的mutations就像一个事件:每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数接受state作为第一个参数。

但是我们又不能直接来调用一个mutations的handler。要唤醒一个mutations handler,需要以相应的type来调用store.commit方法。

这个是在mutations.js中注册的一些的事件

这里写图片描述

这是在组件中来触发这个事件

当然,我们注意到,mutations中可以传递额外的参数,这个参数就叫做mutations的载荷。
在更多的情况下,载荷应该是一个对象。这样可以包含更多的字段。

但是mutations必须是同步函数。

那我们如何来异步的更新State呢?

答案是: Actions

Actions

Actions类似于 mutations 不同的是:

  1. Actions 提交的是mutations,而不是直接变更状态。
  2. Actions 可以包含任意异步操作。

这也就形成了 actions —— mutations —— state 的过程

Actions函数接受一个与store实例具有相同方法和属性的context对象,因此可以通过context.commit来提交一个mutations。但是如何触发呢?

答案: store.dispatch

这里写图片描述

这里写图片描述 

这里写图片描述

Modules

使用单一状态树,导致应用的所有状态都集中到了一个很大的对象。所以,store对象容易变得臃肿。

为了解决这个问题, Vuex允许咱们把store进行一个功能拆分,分割成不同的模块(module)。每个模块都拥有自己的store,mutations,action,getters。

项目结构

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API请求
├── components
│  ├── App.vue
│  └── ...
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── actions.js    # 根级别的 action
  ├── mutations.js   # 根级别的 mutation
  └── modules
    ├── cart.js    # 购物车模块
    └── products.js  # 产品模块

总结:

vuex可以用在单页面上的组件间共享状态。不适合用于跨页面的通信。

另外,对于一些跨页面的数据或者关键性的数据,可以通过localStorage,sessionStorage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue3.0中的双向数据绑定方法及优缺点

    vue3.0中的双向数据绑定方法及优缺点

    这篇文章主要介绍了vue3.0中的双向数据绑定方法 ,文中通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 详解Vue单元测试Karma+Mocha学习笔记

    详解Vue单元测试Karma+Mocha学习笔记

    本篇文章主要介绍了详解Vue单元测试Karma+Mocha学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • ElementUI中el-tabs事件绑定的具体使用

    ElementUI中el-tabs事件绑定的具体使用

    本文主要介绍了ElementUI中el-tabs事件绑定的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue中vite.config.js配置跨域以及环境配置方式

    vue中vite.config.js配置跨域以及环境配置方式

    这篇文章主要介绍了vue中vite.config.js配置跨域以及环境配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3中关于getCurrentInstance的大坑及解决

    Vue3中关于getCurrentInstance的大坑及解决

    这篇文章主要介绍了Vue3中关于getCurrentInstance的大坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue.js移动端tab组件的封装实践实例

    vue.js移动端tab组件的封装实践实例

    本篇文章主要介绍了vue.js移动端tab的封装实践实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 微信小程序开发实现消息框弹出

    微信小程序开发实现消息框弹出

    在小程序的wxml文件中创建消息框,消息框一般包含要提示的消息内容以及确认和取消按钮,在小程序的wxss文件中定义消息框的样式,在小程序的js文件中,我们需要通过Animation对象实现消息框的弹出动画
    2023-12-12
  • Vue3响应式高阶用法之toRaw()的使用

    Vue3响应式高阶用法之toRaw()的使用

    在Vue3中,toRaw方法允许用户获取响应式对象的原始值,有助于性能优化和与外部库集成,它通过绕过Vue的响应式系统,仅在必要时触发更新,从而提升效率,本文就来具体介绍一下,感兴趣的可以了解一下
    2024-09-09
  • vue+elementui实现动态控制表格列的显示和隐藏

    vue+elementui实现动态控制表格列的显示和隐藏

    这篇文章主要介绍了vue+elementui实现动态控制表格列的显示和隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vuex中如何getters动态获取state的值

    Vuex中如何getters动态获取state的值

    这篇文章主要介绍了Vuex中如何getters动态获取state的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论