pinia定义store及其简单的使用

news2024/11/20 4:55:49

定义store

在使用pinia管理状态之前,我们得知道 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字：

	import { defineStore } from "pinia";
	
	// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
	// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
	// 第一个参数是你的应用中 Store 的唯一 ID。
	export const useCounterStore = defineStore("counter", {
	  state: () => ({ count: 0 })
	});

这个名字，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为 use… 是一个符合组合式函数风格的约定。

defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

option 选项式 store

与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象

import { defineStore } from "pinia";

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
});

你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

为方便上手使用，Option Store 应尽可能直观简单。

Setup 组合式Store

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

import { defineStore } from "pinia";
import { ref, computed } from "vue";
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

在 Setup Store 中：

ref() 就是 state 属性
computed() 就是 getters
function() 就是 actions

注意，要让 pinia 正确识别 state，你必须在 setup store 中返回 state 的所有属性。这意味着，你不能在 store 中使用私有属性。不完整返回会影响 SSR ，开发工具和其他插件的正常运行。

Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。

Setup store 也可以依赖于全局提供的属性，比如路由。任何应用层面提供的属性都可以在 store 中使用 inject() 访问，就像在组件中一样：

import { defineStore } from "pinia";
import { ref, computed, inject } from "vue";
import { useRoute } from 'vue-router'
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  const route = useRoute()
  // 这里假定 `app.provide('appProvided', 'value')` 已经调用过
  const appProvided = inject('appProvided')
  return { count, doubleCount, increment, route, appProvided }
})

使用 Store

切记在使用store之前需要先创建和挂载store
如下图,在main.js中引入pinia并挂载到vue实例上

在这里插入图片描述
现在挂载好了,为了更直观的看到store内的属性
我去掉了前面挂载的路由之类的只留下了状态,计算属性以及方法

import { defineStore } from "pinia";
import { ref, computed } from "vue";
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

现在可以去组件中使用了
虽然我们前面定义了一个 store，但在我们使用 <script setup> 调用 useStore()(或者使用 setup() 函数，像所有的组件那样) 之前，store 实例是不会被创建的：

<script setup>
import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
console.log(store);
</script>

<template>
  <div>hello pinia</div>
</template>

<style scoped lang="scss"></style>

我们现在就能在控制台查看到store什么样子了
在这里插入图片描述
从中我们能看到store自带了一些带$前缀的属性,其中$id 还记得么,就是定义store中的第一个参数,
我们可以通过这个id来分辨定义store
count 和doubleCount就是定义的状态和计算属性
increment即是方法

一旦 store 被实例化，你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性
这些都可以在组件中直接使用
示例如下

<script setup>
import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
console.log(store);
</script>

<template>
  <div>hello pinia</div>
  <p>{{ store.count }}</p>
  <p>{{ store.doubleCount }}</p>
  <button @click="store.increment">store.increment</button>
</template>

<style scoped lang="scss"></style>