该系列文章主要基于官方Vue教程，对Vue使用及特性等方面做一个较为系统的总结

Vue官方文档链接Vue.js
Pinia官方文档链接Pinia

pinia实例创建

安装依赖：

1
2
3
yarn add pinia
# 或者使用 npm
npm install pinia

创建一个pinia实例并将其注入Vue当中

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

使用Vue2时，还需要格外引入一个插件PiniaVuePlugin

Vue2引入pinia 
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。
  pinia,
})

store数据仓库

Store是什么

Store（数据仓库）是一个保存业务状态和逻辑的实体，它并不存在于组件树中，而是一个独立存在的实体部分。换句话说，它承载着全局状态，存储在store中的数据面向每一个组件，即每一个组件都能够读取它，（就像全局注入provide），但它提供的功能要比注入更加丰富。

Store中有三个概念state、getter和action相当于选项式中的配置项data、computed和methods

Store使用工作流

在全局将pinia注册为插件后，pinia就像Vue一样全局提供了一些api，使用defineStore()创建一个仓库，代码示例如下：

1
2
3
4
5
6
7
8
import { defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

随后在要使用该仓库的组件中导入这个仓库，随后便可以在任意位置访问仓库了
1
2
3
4
5
<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
</script>

每个仓库需要一个独一无二的id，可以将其作为第一个参数传入，也可以写作配置项的形式，第二个参数接受两个值，option对象或setup函数


仓库返回函数命名建议使用useXXXStore的形式，以便产生习惯性的用法

Option Store

与Vue的选项式api类似，我们可以传入一个带有state、getter和action的Option对象，代码示例：

1
2
3
4
5
6
7
8
9
10
11
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

这种方式与Vuex非常相似，适合做仓库间的迁移，同时option api也更加简单直观

Setup Store

Store中也支持使用setup创建组合式api的形式，使用这种方式需要传入一个函数，并返回一个我们想暴露的对象

1
2
3
4
5
6
7
8
9
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

  • ref()就是state属性（state自带响应式，一般情况下都需要响应式数据）
  • computed()就是 getter
  • function就是actions

在仓库中也可以使用全局提供的属性，比如用useRoute()调取页面路由，用infect获取注入的数据

storeToRefs

可以直接对仓库中的数据进行解构，但一旦解构后数据就会失去响应性，故需要使用storeToRefs()为其赋予响应性

1
2
3
4
5
6
7
8
9
10
<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

store配置项

仓库ID

不要忘记每个仓库的必备标识符

1
2
3
4
5
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  // 其他配置项...
});

State

state是每个仓库的核心，在state中预定义能代表整个仓库的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 为了完整类型推理，推荐使用箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断出它们的类型
      count: 0,
      name: 'Eduardo',
      isAdmin: true,
      items: [],
      hasChanged: true,
    }
  },
})

getter

getter用于存储计算属性的状态，往往依赖于state中的值

1
2
3
4
5
6
7
8
9
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // 其他配置项...
});

store中的this指针指向整个store实例，故可以通过this来访问仓库中的其他数据

actions

相当于仓库中的方法

pinia中的actions中定义的方法可以自然处理异步函数


1
2
3
4
5
6
7
8
9
10
11
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  // 其他配置项...
});

辅助函数

pinia中还提供了一系列的辅助函数用来帮你完成一些任务

mapState

mapState是用于映射仓库状态(state)的方法，使得组件能够直接访问仓库的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapState } from 'pinia';
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    // 使用 mapState 映射状态
    const { count } = mapState(counterStore, ['count']);

    return { count };
  },
};

mapGetter

mapGetter用于映射计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapGetters } from 'pinia';
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    // 使用 mapGetters 映射计算属性
    const { doubleCount } = mapGetters(counterStore, ['doubleCount']);

    return { doubleCount };
  },
};

mapActions

同理，mapActions用于映射方法

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapActions } from 'pinia';
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();

    // 使用 mapActions 映射动作
    const { increment } = mapActions(counterStore, ['increment']);

    return { increment };
  },
};