一、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. How to change the text color in the terminal

    You can open the file ~/.bashrc and then choose the force_color_prompt=yes otherwise, you can change ...

  2. DEP(Data Execution Prevention) 数据执行保护

    1.原理 数据执行保护,简称“DEP”,英文全称为“Data Execution Prevention”,是一组在存储器上运行额外检查的硬件和软件技术,有助于防止恶意程序码在系统上运行. 此技术由Mi ...

  3. GPO - General GPO Settings(1)

    Prohibit access to Control Panel and PC settings Disable GPO for Administrators and /or User Groups  ...

  4. Android 性能优化 ---- 内存优化

    1.Android内存管理机制 1.1 Java内存分配模型 先上一张JVM将内存划分区域的图 程序计数器:存储当前线程执行目标方法执行到第几行. 栈内存:Java栈中存放的是一个个栈帧,每个栈帧对应 ...

  5. echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了?原来是color的锅!

    今天发现一个奇怪的问题. 当我的鼠标触摸柱状图的时候,柱状图就消失了. 后来发现是颜色的设置有问题. color: ['rgba(68,238,224)', 'rgba(17,215,255)', ' ...

  6. .Net微服务实战之负载均衡(上)

    系列文章 .Net微服务实战之技术选型篇 .Net微服务实战之技术架构分层篇 .Net微服务实战之DevOps篇 相关源码:https://github.com/SkyChenSky/Sikiro P ...

  7. 高效C++:让自己习惯C++

    视C++为一个联邦语言 面向过程,面向对象,泛型编程,元编程,C++同时支持,强大而迷惑 C++语言可以分为如下4个部分: C,C语言相同 C with Class,包括封装.继承.多态... Tem ...

  8. 设计模式:state模式

    核心: 把状态的判断逻辑转移到表示不同状态的一系列类当中,可以把复杂的判断逻辑简化 例子: class State //状态接口 { public: virtual void show() = 0; ...

  9. 做软件测试要月入20k?听听腾讯大牛怎么说

    作者:兰色链接:https://www.zhihu.com/question/373819487/answer/1183309514来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  10. Windows电脑多个SSH Key管理.md

    笔者偏在阿里云,Github,开源中国上均存放一些私有项目代码,因此需要再Windows电脑上配置多个SSH Key 环境 操作系统:windows 7 Git 提示:Git 安装后就可以使用 Git ...