H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】状态管理 vuex

Vuex使用

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

安装

可以参考网址https://vuex.vuejs.org/zh/ins…
这里我就不做多的介绍了。

概念

(1)state:单一状态树 ,每个应用将仅仅包含一个 store 实例。
image.png
(2)getters:可以从store 中的 state 中派生出一些状态,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
image.png
(3)mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
*常量的设计风格
[SOME_MUTATION] (state) {
// mutate state
}
*必须是同步函数
image.png
(4)actions:
image.png

模块分割

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
image.png
module文件夹中每个都是子store,在index.js文件中需要引入单个module下面的子store,同时需要在modules中写入单个module,如下:
image.pngimage.png

namespaced: true的问题

在每个单独的module文件中,使用开启命名空间
image.png
注意:
(1)应用层级的状态应该集中到单个 store 对象中。
(2)提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
(3)异步逻辑都应该封装到 action 里面。

Vuex在项目中的使用

1. 非父子通信问题
2. 异步数据快照,缓存后端数据,提高用户体验(单页面中可以减少请求后端数据)

1.非父子通信问题

下面以一个简单的module为例
image.png
在这个userinfoModule中state中设置了一个usernamemutations中有一个setUsername方法,现在来看视图中如何使用:
首先,username是需要在login时存入的,那么在login页面中需要通过import引入image.png
在login页面的methods中解构
image.png,
userinfo是modules中的单个module的名字,setUsername是存在userinfoModule中的方法。那么在用户登录成功的时候需要写上this.setUsername(this.username);如下image.png,即可成功将此时登录的username存入到userinfoModule,这是一个简单的设置。
那么如何在别的页面使用这个username呢?下面举个例子来完成一个简单的非父子通信问题:
首先在那个页面使用username,就需要在页面中通过import来引入image.png
在页面的computed中通过解构的方法
...mapState("userinfo", ["username"]),image.png
就可以在页面中通过this.username来使用了。
以上是一个简单的通信问题

2. 异步数据快照,缓存后端数据,提高用户体验(单页面中可以减少请求后端数据)

下面简单介绍一下如何在Vuex中请求数据并缓存数据,取用数据。
image.png
checkoutModule中,数据请求是写在actions中的,其中有个方法store.rootState.userinfo.username,这个方法是单个module之间通过store.rootState来取值通信的,rootState是根实例。在actions中设置一个名为getCartList的方法,需要传一个参数store,通过store.commint()将请求回来的数据通过setCartlist这个方法设置为cartlist,此时cartlist中是需要的数据。下面我们在别的页面调用这个数据:
首先,本着在哪里使用就要在哪里引入的原则,先通过import导入image.png
然后在computed中解构image.png,那么此时这个cartlist就可以随意使用了。

那么,因为Vuex有缓存,如果数据需要变更,我需要在别的页面再调用这个axios该怎么办呢?
首先需要import引入import { mapActions } from "vuex";
然后在methods中解构image.png
最后在哪里需要调用数据请求直接image.png
就可以让axios重新请求一次了。此时得到的数据就是最新的了。

vue chrome devtools

image.png
可以通过devtools来调试

持久化

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。可以结合本地存储做到数据状态持久化,也可以通过插件vuex-persistedstate。插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。
首先安装cnpm i vuex-persistedstate –save
在store下的index.js中
可以持久化所有state,也可以指定需要持久化的state
image.png

什么情况下我应该使用 Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此,如果您的应用够简单,您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:
Flux 架构就像眼镜:您自会知道什么时候需要它。

以上,是我个人做出的一点总结,欢迎大家指正及讨论
感谢Vue作者及团队!

本文地址:H5W3 » 【前端技术】状态管理 vuex

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址