利用 pinia 添加局部 store

在开发中，有些时候，我们希望可以在局部实现 store，以方便数据的临时存储。

这种需求，更多是在编写单独的复杂组件，并需要打包成库时，可能需要用到。比如，在 element-ui 中，table 组件就用到了临时存储，它们内部手动实现了一个 store 对象。这当然是一个灵活的方案，但每次手写也是很不爽的。

由于 pinia 小巧，灵活，且完整的支持类型系统，所以特别适合添加在组件中。

定义 store

首先配置好 store

import Vue from 'vue';
import { createPinia, PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);

export const store = createPinia();

然后创建一个 store

export useInfoStore = defineStore({
  id: 'info', // 之后我们使用这个名字就可以了
  state: () => ({
    // 定义自己的内容，比如这里有一个 username
    username: ''
  }),
  actions: {
    setUsername(name: string) {
        this.username = name;
    }
  }
})

这样，我们就定义好了 store。它就可以使用了。

其实，这一步和在项目中使用没有区别，我们在项目中也是这样使用。但是，我们挂载的时机很重要，通过不同的挂载时机，我们可以区分不同的 store。

挂载 store

在我们希望使用的组件的根文件下，比如，我们的项目中，有一个 table 组件，其他地方引用时，需要从 @/components/table 中引入，我们就可以在 @/components/table/index.vue 文件中引入这个 store。

// table/index.vue

<template>
...
</template>

<script lang="ts">
import Vue from 'vue';
imnport { store } from './store'; // 比如我们刚才的 store 就定义在了这里

export default Vue.extend({
    name: 'MyTable',

    pinia: store // 在这里添加就可以了
})
</script>

这种方式，同时适用于 vue2 和 vue3。现在，我们在这个组件以内就可以完整的使用 store 中的内容，并且如果我们还要使用全局的内容，也不会有冲突。这个方式主要是因为 pinia 有一套自己的声明系统，通过 id 来区分不同的存储，所以，我们在创建时，只要把 id 写好，就不会有问题。