Vuex基础(二):可维护性目录结构,getters,mapState,mapGetters

我们上一篇,是直接在 new Vuex.Store() 的过程中,传入的 state 和 mutations,这个方法其实不是特别的好。我们接下来就按照常规的方法来做。

首先,在 store 文件夹下面创建一个 state 的文件夹,然后在 state 里面,我们根据某些情况,state 的不同的形式,我们可以根据不同的模块来区分不同的 state,我们目前先按照只有一个模块的形式去做。

然后在 state 文件夹下面创建一个 state.js。

我们直接 export default { },因为我们的 state 其实它就是一个初始的JS对象,我们的数据是在这个基础上进行修改的。

然后我们在声明 state 的过程当中,即便是一开始你用不到的一些字段或对象,你都要去事先给它申明一个值。

不然的话就跟我们之前讲过的,我们在vue组件里面,如果 data 一开始没有声明好一个值,那么会导致你后续去增加这个值的时候,它的数据不是响应式的,它不会更新我们的视图。

所以我们这边使用的这个state,你就把它当做去写一个 vue 组件时候,你写的这个 data 方法里面返回的那个对象一样这么去写。需要去用到的字段,全部要一次性声明好。

那么为什么我们要新建一个文件夹和 js 文件呢?

我们这样做的好处就是,我们每一样东西都去单独写一个文件,那么后续你就可以拆更多的文件,以一个更好的形式去组织你的代码。

而不是你把所有的东西都写在 store.js 这一个页面里面。

因为我们现在应用的数据,还有我们的操作都非常的少,所以你写在一起感觉也不是特别的奇怪。

但是当你的 mutations 或者 actions 变的非常多的时候,你内容的增加,会让你的维护成本变得非常高。

所以一开始就建立一个好的目录结构,是非常重要的一件事情。

然后同样的,我们的 mutations,也要去把它拿到一个新的文件里面。

看到这里,大家可能会有个疑问,为什么我们上面要叫它 defaultState,而不叫它 state 呢?

因为我们如果有服务端渲染的时候,其实会有一部分的数据直接传到我们的客户端。

那这个时候我们会用拿到的这部分数据,去覆盖我们的 defaultState 数据。

因为我们 defaultState 的数据没有任何跟业务相关的一些内容,所以它只是一个默认数据,不是我们一个真正的状态。

然后对于 mutations 来说,它是一个操作的定义,所以它不管你有没有默认数据,它的操作都是一样的。

然后我们讲下 getters。那么 getters 是一个什么样的概念呢?你完全可以把它理解为,我们在组件内写的 computed。

getters 是为了方便我们去生成一些,在应用里面可以直接用的数据。

因为我们在跟后端开发进行联调的时候,我们会发现,他们提供给我们的一些数据,有时候并不适合我们直接在 Vue 层去显示,这些数据,我们还要进行一些组装。

那么这个组装的过程,我们当然可以直接的,拿到我们页面里面去写个 computed,它也可以帮我们去组装数据。

但是如果这个组装的过程,我们不仅仅是在这个页面上要用,在其他的页面上也要用。

那么你就不可能每个地方都写这相同的一个 computed,这样的话,你的代码就重复了。而且你将来要去维护的话,也会变的比较麻烦。

那这个时候,我们如果把数据放在 state 里面,然后我们可以通过 getters,给我们统一的去产出这些,我们在页面里面就可以直接去用的数据。

如果我们去修改了 firstName 或者 lastName,都会导致我们的 fullName 进行更新。

所以,我们完全可以把 getters 理解为一个 computed,只不过它是一个在 Vuex 里面去使用的 computed。

我们每次在组件里面这么去写 this.$store.state.xxx 或者 this.$store.getters.xxx,会非常的麻烦。

那么有没有更简单的办法,帮我们去处理这些内容呢?

Vuex 为我们提供了非常多的帮助方法,能够让我们在组件内快速的去使用 Vuex。

mapState 和 mapGetters 都是帮助方法。

它能够让我们非常方便的去在组件内部,使用我们的一些数据。

那么我们就不需要去自己声明每一个数据,而且还要去通过 return this.$store.state.xxx。

如果都是同名的,那么我们就可以直接通过一个数组去传。

那如果有不同名的情况,比如 count ,我们想重新命名为 result,那怎么办呢?

那么,我们还可以有更好的方法去做,那就是通过一个函数:

如果我们需要在 computed 里面做一些计算,那么肯定用这个方式是最好的。

因为你如果只是用字符串来做,那么你没有办法做任何的计算。

mapState 和 mapGetters 也都是一样的用法。

这就是在我们组件内部去使用 state 和 getters 的一个简单方法。

发布了61 篇原创文章 · 获赞 3 · 访问量 4397

猜你喜欢

转载自blog.csdn.net/weixin_43921436/article/details/97818275