likes
comments
collection
share

【大厂企业级项目架构】之状态管理

作者站长头像
站长
· 阅读数 32

这是大厂企业级项目架构系列的第六篇，这系列的文章如下：

本篇文章比较短，因为pinia使用起来非常简单，大概花个5分钟就能看完本文。

通常一个有一定规模的前端项目，组件间共享状态是很常见且必备的。本次我们作为一个企业级的项目，肯定也需要共享状态，我们会选用pinia来作为状态管理方案。

pinia对ts有良好的支持，也很简单易用，使用上基本与vuex相同，并且pinia本身是扁平化的设计，就是说每个store都独立的，可以更好的做模块分割，所以是一个不错的选择。

本文要做的目标如下：

  • 接入pinia，划分好模块
  • 支持持久化存储

接下来跟着我一起学习吧。

pinia基本使用

安装

pnpm i pinia

简单使用

其实pinia的使用非常简单，首先我们需要在项目入口文件main.ts里注册pinia

import { createPinia } from 'pinia';
app.use(createPinia());

然后在我们项目src新建store文件夹，用于存放状态管理相关的源码。

假设我们有一个用户模块，我们可以建一个useUserStore.ts来存放用户的状态

import { defineStore } from 'pinia';
// 注册用户模块
export default defineStore('user', {
    // 这里用于存放相应模块的状态
    state: () => {
        return {
            username: 'xxx',
            // ...
        };
    },
    // 在这里改变模块的状态
    actions: {
        setUsername(name) {
            this.username = name;
        }
    },
});

定义好模块之后，就可以在其他需要使用这个模块数据的地方读取它的状态了，假如你有一个用户信息的页面UserInfo.vue，就可以像如下一样读取模块状态了。

<script lang="ts" setup>
import useUserStore from '@/store/useUserStore';
import { computed } from 'vue';
const userInfo = computed(() => useUserStore());
</script>
<template>
    {{ userInfo.username }}
</template>

### 划分模块
上面简单演示了`pinia`是如何使用的，但是实际开发中，我们不可能把所有状态都全部写在一个文件中，我们会划分不同的模块来存放相应模块下的状态。而`pinia`的模块不像`vuex`一样是嵌套结构的，它采用了扁平化的设计，也就是说一个store就对应一个模块，各模块之间互不影响，所以我们只需要为相应模块创建store就可以了。

目录结构如下：
```sh
store
├── index.ts              主入口
└── modules               存放不同模块的状态
    ├── demo1.ts          demo1的状态
    .....
    ├── permission.ts     权限相关的状态
    └── user.ts           用户模块相关的状态

上面modules目录下每个模块的状态管理都是独立的，互不影响，你可以在里面写自己的state/getters/actions，使用的时候，需要用到哪个模块，就导入哪个模块即可，相当简单方便。

以user.ts为例举个具体的例子，user.ts的内容如下

import { defineStore } from 'pinia';
// 注册用户模块
export default defineStore('user', {
    // 这里用于存放相应模块的状态
    state: () => {
        return {
            username: 'xxx',
            // ...
        };
    },
    // 在这里改变模块的状态
    actions: {
        setUsername(name) {
            this.username = name;
        }
    },
    // getters
    getters: {
        // 这里可以对状态进行转换后返回，类似计算属性
        getUsername() {
            return this.username;
        }
    }
});

需要注意的是pinia没有mutation，不管是同步还是异步修改状态都只需要在actions里修改即可，你如果有使用过vuex，那pinia上手还是毫无难度的

后续每个需要单独划分出来的模块，都只需要像上面一样定义store即可。

响应性处理

需要注意的是，当我们在业务层结构出store中的状态时，会失去响应性，此时有几种解决办法，一个是用compute将取出的状态包装一层，另一个则是通过pinia提供的storeToRefs包装一下，以保证这个取出来的属性的响应性，具体代码如下：

<script lang="ts" setup>
import useUserStore from '@/store/useUserStore';
import { computed } from 'vue';
import { storeToRefs } from 'storeToRefs';
// 方法一： 通过computed包装
// const username = computed(() => useUserStore().username);
// 方法二： 通过storeToRefs
const { username } = storeToRefs(userUserStore());
</script>
<template>
    {{ username }}
</template>

状态持久化

在某些场景下，我们可能需要对数据进行持久化。而对于需要被持久化的数据，我们一般是通过localStorage来做存储，而此时我们也可以通过pinia的插件pinia-plugin-persistedstate帮我们统一管理，因为这个插件可以帮我们将数据保存到localStorage或sessionStorage中，这样我们也就无需单独基于localStorage去封装项目的持久化工具了。

安装pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

注册为pinia的插件

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
export const store = createPinia();
store.use(piniaPluginPersistedstate);

对于需要被持久化的store，我们仅需指定persist: true，这样插件就可以帮我们持久化了，还是以上面的user.ts这个store为例，具体如下：

import { defineStore } from 'pinia';
// 注册用户模块
export default defineStore('user', {
    // 这里用于存放相应模块的状态
    state: () => {
        return {
            username: 'xxx',
            // ...
        };
    },
    // ...省略actions和getters
    // 仅需设置这个字段，插件就可以帮我们做持久化
    persist: true,
});

指定了持久化的选项之后，如果状态有更新，则插件也会帮我们将更新后的数据持久化，并且读取的时候，也会帮我们从localStorage或sessionStorage中读取，我们也无需担心刷新页面后数据丢失了。

当然，我们有时候并不需要整个store的数据都持久化，这个时候我们可以通过persist选项进行更加精细化的控制，单独指定需要持久化的字段。如下所示：

import { defineStore } from 'pinia';
// 注册用户模块
export default defineStore('user', {
    // 这里用于存放相应模块的状态
    state: () => {
        return {
            username: 'xxx',
            jobInfo: {
                company: {},
                personal: {},
            }
            // ...
        };
    },
    // ...省略actions和getters
    // 仅需设置这个字段，插件就可以帮我们做持久化
    persist: {
        // 指定是localStorage还是sessionStorage，默认是local
        // storage: window.sessionStorage,
        // 更加精细地控制需要持久化的字段
        // 像下面就只对jobInfo下的company字段进行持久化
        paths: ['jobInfo.company'],
    }
});

总结

至此，关于项目接入pinia就讲完了，其实pinia的使用非常简单，上面比较关键的是你需要根据你自己项目的模块来划分好store，这样后续更加易于管理和维护。有什么使用上的问题，欢迎留言，我回尽量解答。

转载自:https://juejin.cn/post/7133979053786316807
评论
请登录