学会VueX基本使用

最新推荐文章于 2024-10-05 01:22:45 发布

单车不好骑

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量121

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43564259/article/details/103529965

版权

什么是VueX？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。（可以理解为一个临时的可共用的一个对象）我们可以在所有的组件访问它。
我们可以把他理解为一个仓库，他里面存储着一些工具，而组件是工人，在工人需要仓库里的工具的时候，就需要通过一系列的规范操作去获取它。

有什么用？

一般适用于中大型的单页面应用，如果需要多个组件共享一个状态和数据的时候就可以用到VueX

快速使用

如果是使用vuecli脚手架快速构建的vue项目

如果你在构建时选择使用了VueX，如下图：
在这里插入图片描述
在创建项目后项目的目录下就会出现以下目录：

其中index.js里导出了一个对象，里面的属性名代表的含义分别是：
state：Vuex仓库中的数据。
mutations: Vuex 的 store 中的状态更改的唯一方法是提交 mutation。同步的方法放在这里面
action: 提交的是 mutation，而不是直接变更状态,提交的是异步方法
modules：作用是当项目比较大时，Vuex 允许我们将 store 分割成模块。

每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

当我们需要访问`state`的数据时：

[外链图片转存失败,源站可能有防盗inedx!链机制,建js]传(imhttps://g-86blog.csdnimg.cn/201912114514620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY0MjU5,size_16,color_FFFFFF,t_70)😕/img-blog.csdnimg.cn/20191213164514620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTY0MjU5,size_16,color_FFFFFF,t_70)] 在这里插入图片描述
可以在组件中使用：this.$store.state.name

在某些时候，我们需要更改state中的值

注意，在更改时，不能直接this.$store.state.name = XXX, 而是要通过mutations去改，这样可以让我们追踪到store每次的更改，实例如下：
在这里插入图片描述

如图，当我需要修改name时，先在mutations里去添加一个方法，然后再组件中使用this.$store.commit去改变，需要注意的是：coommit方法第一个参数是mutations里的方法名，后面第二个、第三个。。。的参数都是mutations里的方法需要的参数。
当你的修改是异步时：
某些情况下，我们修改时时异步的，这时我们就需要用到actions，值得注意的是actions并不会直接修改state，而是通过调用mutations里的方法去修改，实例如下：
在这里插入图片描述

注意

Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。