Vuex

vuex 是专门帮助vue管理的一个js库,利用了vue.js中细粒度数据响应机制来进行高效的状态更新。

vuex核心就是store,store就是个仓库,这里采用了单一的store状态树,一个对象就包含了全部的应用层级状态,这也就使得每个应用仅仅包含一个store实例,这种单一状态树可以让我们直接定位任意的代码片段,在调试过程中就可以轻松的取得当前应用的快照。

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => commit('increment'), 100);
}
} })

state为vuex中唯一的数据源,和vue中state的规则一致,都是响应式的,正因为如此,vue component 可以通过 computed属性来返回在vuex中读取的值,从而响应式的跟随state的变化进行渲染 ,除此之外我们还需要从store中的state派生一些状态,比如过滤筛选数据,vuex允许我们在store定义getter,可以认为是store的一个计算属性,所以getter中的返回值会根据他的依赖被缓存起来,只有等它的依赖发生变化时,才会被重新计算,这些都是vuex读取操作。

那么vuex中是如何修改状态的呢?

更改vuex状态的唯一方法是mutation,vuex中的mutation 非常类似于事件,每个mutation都有一个字符串的事件类型,和一个回调函数,我们可以通过store的commit方法同步修改store的数据,这里需要注意的是mutation必须是一个同步函数,正因为mutation是同步的,我们可以在vuex中提供的插件机制去订阅mutation变化,在这些plugins中我们可以进行打点或者做数据监听相关的工作。

那么vuex中如何完成异步操作呢?

vuex是让action来完成异步操作,我们可以通过store的dispatch方法来触发相应的action的操作,然后在action中完成类似接口获取或者异步操作,在异步操作完成后的回调函数中使用commit触发mutation变更state中的数据。

代码示例已放在我的gitee上了

vuex初始化的基本结构

使用mapState, mapGetters, mapMutations, mapActions解构操作简化代码

使用子组件通过vuex代理设置父组件的状态

小结

  • State: Store中唯一数据源,响应式。
  • Getter: 有State派生出的状态,store的计算属性
  • Mutations: 由commit触发,必须是同步函数,是修改state值的唯一方式
  • Actions: 由dispatch触发,可以处理服务API等任何异步操作,不直接更改state,是通过Mutation 中 commit去变更数据

思考

mutations可以修改state的值,而state是响应式的,在vue component声明计算属性就可以自动获取state的值并进行视图渲染,那么vue的这种响应式如何与vue的响应式串联起来呢,使得vuex的变化同步到组件当中,本文就不再继续深挖了,目前是刚接触vue,如果大家有什么好的建议欢迎留言评论。

以上就是通过学习vuex基础整理的笔记,供学习参考,文中示例多处引用,请谨慎转载。

搞一下vue生态,从vuex开始的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. Vue 入门之 Vuex 实战

    Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...

  3. Vue学习笔记:Vuex

    为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...

  4. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

  5. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  6. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  8. vue+vux+axios+vuex+vue-router的项目的理解

    本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...

  9. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

随机推荐

  1. 简化版chmod

    我们知道对文件访问权限的修改在Shell下可通过chmod来进行 例如 可以看到v.c文件从无权限到所有者可读可写可执行.群组和其他用户可读可执行 chmod函数原型 int chmod(const ...

  2. 高效读取大文件,再也不用担心 OOM 了!

    内存读取 第一个版本,采用内存读取的方式,所有的数据首先读读取到内存中,程序代码如下: Stopwatch stopwatch = Stopwatch.createStarted(); // 将全部行 ...

  3. github单独下载某一个文件夹

    可以借助svn工具进行下载,实现只下载repo下的指定文件夹内容 背景 需要下载这个文件夹下所有内容https://github.com/rabbitmq/rabbitmq-tutorials/tre ...

  4. CentOS 初体验三: Yum 安装、卸载软件

    一:Yum 简介 Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指 ...

  5. Spring(1):Spring介绍

    一,Spring简介: Spring是一个开源框架,它由Rod Johnson创建:它是为了解决企业应用开发的复杂性而创建的 Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架 ...

  6. Servlet(1):Servlet介绍

    一. Servlet介绍 Servlet 是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生 ...

  7. 【Linux】【Services】【Package】编译安装

    程序包编译安装:         testapp-VERSION-release.src.rpm --> 安装后,使用rpmbuild命令制作成二进制格式的rpm包,而后再安装:         ...

  8. 注册页面的servlet

    package cn.itcast.travel.web.servlet;import cn.itcast.travel.domain.ResultInfo;import cn.itcast.trav ...

  9. Django auth

    auth是django一个自带的用户验证系统,使用它可以减少我们的开发流程. 基本使用 大体流程: 自定义类 from django.contrib.auth.models import Abstra ...

  10. 【紧急】继续折腾,Log4j再发2.1.6,强烈建议升级

    背景 继前天正式发布的2.15.0之后,Apache log4j 2 团队宣布 Log4j 2.16.0 发布! 由于SLF4J适配兼容性的中断,Log4j 现在发布两个版本的SLF4J to Log ...