一、Vuex 是什么?

官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

关键词:状态管理器

二、为什么我们要用呢?

官网:

当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。

关键词:多个组件共同用一个变量的时候,靠组件传参太复杂,是的,一个变量,进行父传子、子传孙、子子孙孙无穷尽,想想都不行啊兄弟萌,不要想为啥用了

三、怎么用?

在此了解五个属性:State\Mutation\Action\Getter\Module

官网:每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

看不懂的还是听我给你讲:我们可以直接在main.js中创建一个store,

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})  

接下来为了在 Vue 组件中访问 this.$store property,需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件,以 store 选项的方式“注入”该 store 的机制

new Vue({
el: '#app',
store
})

现在我们可以从组件的方法提交一个变更:

methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}

以上就是我们通过vuex来创建state变量、通过mutation来修改变量的过程,具体为什么这么做:

网上有很多解释的文档,这里直接复制过来

1. state:vuex的基本数据,用来存储变量

2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

   回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

简单来说,state用来定义变量、mutation修改变量

备注:其实vuex如果你仅仅是用state的时候,你会发现,此时相当于在全局定义了一个变量,因此我们其实是可以直接赋值进行修改的

 this.$store.state.bianliang = xinbianliang ,但是为什么要用mutation呢,这是因为在严格语法下,如果直接修改state里面的值,会给我们报错的,因此用mutation修改

action上面的用法说了,可以操作异步,,,getter类似于vue的compute属性,进行视图渲染,初学者可能一般不用,module是定义多个模块,方便大项目引入,

因此,初学者其实仅仅掌握、store\mutation的用法后,可以简单的说自己掌握了状态管理器

我觉得如果想彻底了解vuex的用法,我们不单单要光看文档,还需要不断的用键盘进行敲击,记住语法、作用等,这样才能加深理解

 

小谢第50问:vuex的五个属性-使用-介绍的更多相关文章

  1. vue中vuex的五个属性和基本用法

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...

  2. 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题

    1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...

  3. 小谢第58问:nuxt搭建企业官网

    最近公司要重构公司官网,jq+bootstrap 改为了vue,刚开始我以为用vue不是挺好的嘛,后来才发现,有于vue单页面的特性,不利于搜索引擎的抓取,因此在seo方面需要另外想办法,于是乎,就找 ...

  4. 小谢第8问:ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  5. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  6. 小谢第6问:js中,filter函数是怎么使用的

    数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...

  7. 小谢第2问:后端返回为数组list时候,怎么实现转为tree

    要求后端返回给我的list时候,在数组中定义有id , parentid, 可以用双重循环的方法,得到tree需要的数据结构,这样得到的数据就可以直接复制给树组件的data啦const oldData ...

  8. 小谢第1问:为什么要写blog

    一直犹豫了好久,终于在csdn上弄好了自己的博客账号,感谢平台,以后在工作的过程中,遇到不懂得问题,解决后,会在这里记录下自己所遇到的问题

  9. 小谢第10问:前端JS下载文件、表格

    对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...

随机推荐

  1. scala 数据结构(八 ):-map映射操作

    在Scala中可以通过map映射操作来解决: 将集合中的每一个元素通过指定功能(函数)映射(转换)成新的结果集合这里其实就是所谓的将函数作为参数传递给另外一个函数,这是函数式编程的特点 以HashSe ...

  2. redis(二十一):Redis 架构模式实现(哨兵)

    先了解一下哨兵都 做了什么工作:Redis 的 Sentinel 系统用于管理多个 Redis 服务器(instance), 该系统执行以下三个任务: 监控(Monitoring): Sentinel ...

  3. Linux01 /Linux初识

    Linux01 /Linux初识 目录 Linux01 /Linux初识 1. 服务器 2. Linux系统介绍 3. linux简单介绍 4. VMware与Centos系统安装 5. 各个连接协议 ...

  4. 找出系统web路径

    方法一 :打开web查看源码,复制一个特征字符串,然后替换进下面命令的htmlString搜索之. Win :findstr /s/i/n /d:E:\code\xampp\htdocs\ /c:&q ...

  5. 用matplotlib画简单折线图示例

    例1 import numpy as np import matplotlib.pyplot as plt from scipy import stats rx1 = np.array([54.52, ...

  6. Sequential Minimal Optimization: A Fast Algorithm for Training Support Vector Machines 论文研读

    摘要 本文提出了一种用于训练支持向量机的新算法:序列最小优化算法(SMO).训练支持向量机需要解决非常大的二 次规划(QP)优化问题.SMO 将这个大的 QP 问题分解为一系列最小的 QP 问题.这些 ...

  7. DEX文件解析--3、dex文件字符串解析

    一.前言    前两篇文章链接:     1.DEX文件头解析     2.DEX文件校验和解析    PS:前几天检查文件夹的时候发现DEX文件解析还只写了开头,正好找点事情来做,就去接着解析DEX ...

  8. C#和 JS的闭包

    闭包的概念是内层的函数可以引用包含在它外层的函数的变量,即使外层函数的执行已经终止.但该 变量提供的值并非变量创建时的值,而是在父函数范围内的最终值. C#闭包可理解为跨作用域访问函数内变量,那么如何 ...

  9. 占个坑 未来学qt的时候专用

    今天看了一个大佬发了一个上位机图片便向大佬问道 ”上位机是用什么软件做的“大佬抛下一句qt ,在业界内很通用,windows和linux通吃,便让我萌生了一个想法,去学qt.虽说上位机时常听到,但是自 ...

  10. .net core options 依赖注入的方式

    options 依赖注入的方式 public class JwtSettingsOptions { public const string JwtSettings = "JwtSetting ...