一、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. MCU 51-3定时器

    51定时/计数器简介 51单片机有2个16位定时器/计数器:定时器0(T0为P3.4)和定时器1(T1为P3.5).这里所说的16位是指定时/计数器内部分别有16位的计数寄存器. 当工作在定时模式时, ...

  2. Scala 基础(十):Scala 函数式编程(二)基础(二)过程、惰性函数、异常

    1 过程 将函数的返回类型为Unit的函数称之为过程(procedure),如果明确函数没有返回值,那么等号可以省略 注意事项和细节说明 1)注意区分: 如果函数声明时没有返回值类型,但是有 = 号, ...

  3. 爬虫页面解析 lxml 简单教程

    一.与字符串的相互转换 1.字符串转变为etree 对象 import lxml.html tree = lxml.html.fromstring(content) # content 字符串对象 2 ...

  4. JavaScript之setinterval的具体使用

    关于setInterval在api文档中也有很详细的解释,比如下面那两个: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停 ...

  5. Python基础最难知识点:正则表达式(使用步骤)

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 正则表达式,简称regex,是文本模式的描述方法.你可以在google上搜 ...

  6. JavaWeb基础(day15)( http + tomcat + servlet + 响应)

    HTTP+Tomcat+Servlet+响应 HTTP HTTP  超文本传输协议(Hyper Text  Transfer  Protocol  ),一种网络协议. 协议的组成和过程 HTTP协议由 ...

  7. Html笔试复习

    掌握学习技巧,提高学习质量 学习目标:熟练掌握Html笔试复习题 已掌握目标:Html笔试复习题掌握95% 未完成目标:个别题因粗心造成错误,因选项意思不懂出错 解决方案:了解原因,因错出方案,充分利 ...

  8. 题解 洛谷 P4492 【[HAOI2018]苹果树】

    考虑生成一颗二叉树的过程,加入第一个节点方案数为\(1\),加入第二个节点方案数为\(2\),加入第三个节点方案数为\(3\),发现生成一颗\(n\)个节点的二叉树的方案数为\(n!\). 所以题目中 ...

  9. element-ui的el-progress组件增加修改status状态

    需求:实现进度条增长中呈现百分比,达到100%后将el-progress的status设置为“success” 想法:element对于status只给出了'success', 'exception' ...

  10. R常用统计 - 相关关系分析

    数据格式 每行分别为表型和基因表达情况对应标量,每列分别为样品名的矩阵.假定前9列为phenotype,从第10行起为gene_id,编写简单for循环如下: script require(" ...