Vue-Pinina基本教程

前言

官网地址：Pinia | The intuitive store for Vue.js (vuejs.org)

看以下内容，需要有vuex的基础，下面很多概念会直接省略，比如state、actions、getters用处含义等

1、什么是Pinina

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

  • dev-tools 支持
    • 跟踪动作、突变的时间线
    • Store 出现在使用它们的组件中
    • time travel 和 更容易的调试
  • 热模块更换
    • 在不重新加载页面的情况下修改您的 Store
    • 在开发时保持任何现有状态
  • 插件：使用插件扩展 Pinia 功能
  • 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
  • 服务器端渲染支持

2、与vuex比较

  • Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。

  • 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

与 Vuex 3.x/4.x 的比较

  • Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3

Pinia API 与 Vuex ≤4 有很大不同，即：

  • mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
  • 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
  • 不再需要注入、导入函数、调用函数、享受自动完成功能！
  • 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
  • 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
  • 没有 命名空间模块==。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的==。

安装

  • 以下方式基于vue3，如果想在vue2中使用，则自行查看官网使用方法安装 | Pinia 中文文档 (web3doc.top)，下面就省略了…

1、npm安装

yarn add pinia
# 或者使用 npm
npm install pinia

2、main.js导入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'createApp(App)
.use(createPinia())
.mount('#app')

核心概念

1、Store

1.1、定义Store

  • Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：
  • 这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定，以使其符合你的使用习惯。
  • 您可以根据需要定义任意数量的 store ，并且**您应该在不同的文件中定义每个 store **以充分利用 pinia
import { defineStore } from 'pinia'// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {// other options...
})

1.2、使用Store

  • 一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性。 我们将在接下来的页面中详细介绍这些内容，但自动补全会对您有所帮助。
  • 请注意，store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构
  • 为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。
<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2>
</template><script setup>import { ref } from 'vue'import { useUserStore } from '@/store/user'import { storeToRefs} from 'pinia';// 定义 storeconst userStore = useUserStore();console.log(userStore);// 解构将使下面三个变量将失去响应式  userStore里面的数据是一个被reactive包裹的对象const { userRealName, userName, passward } = userStore;// 下面三个变量拥有响应式，因为被storeToRefs包裹了，它将为任何响应式属性创建 refsconst { userRealName: userRealName2, userName: userName2, passward: passward2 } = storeToRefs(userStore);</script>

2、State

  • 大多数时候，state 是 store 的核心部分。 我们通常从定义应用程序的状态开始。 在 Pinia 中，状态被定义为返回初始状态的函数。 Pinia 在服务器端和客户端都可以工作。

2.1、定义state

import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {/** 相当于 state: () => {return {//xxxx}}*/state: () => ({userRealName: '张三',userName: 'admin',passward: '123456',})
})

2.2、访问state

<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2>
</template><script setup>import { useUserStore } from '@/store/user'// userStore是一个被ractive包裹的对象  state里面定义的属性，将在userStore对象上const userStore = useUserStore();// 将返回整个storeconsole.log(userStore);</script>

2.3、重置状态

可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：

代码
<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2><button @click="changeUser">修改用户信息</button><button @click="resetStore">重置store数据</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();// 修改store中的用户信息function changeUser() {userStore.userRealName = '李四';userStore.userName = 'lisi';userStore.passward = '654321';}// 重置store数据function resetStore() {userStore.$reset();}</script>
效果

在这里插入图片描述

2.4、改变状态

  • 除了直接用 store.counter++ 修改 store，你还可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改
  • 主要区别是$patch() 允许您将批量更改的日志写入开发工具中的一个条目中。 注意两者，state 和 $patch() 的直接更改都出现在 devtools 中，并且可以进行 time travelled（在 Vue 3 中还没有）。
<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2><button @click="changeUser">修改用户信息</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();// 修改store中的用户信息function changeUser() {// 只会修改userRealName和userName的值userStore.$patch({userRealName: '李四',userName: 'lisi',});}
</script>

  • 但是，使用这种语法应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。 正因为如此，$patch 方法也接受一个函数来批量修改集合内部分对象的情况：

  • 给userSore的state中添加用户爱好

store
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({userRealName: '张三',userName: 'zhangsan',passward: '123456',hobby: ['吃饭', '睡觉', '打豆豆'],})
})
页面
<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2><h2>用户爱好：{{ userStore.hobby }}</h2><button @click="changeUserHobby">修改用户爱好</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();// 修改store中的用户信息function changeUserHobby() {// 这样修改很麻烦/* userStore.$patch({hobby: ['吃饭', '睡觉', '打豆豆', '篮球', '台球', '乒乓球']}); */// 直接往后追加userStore.$patch((store) => {store.hobby.push('篮球', '台球', '乒乓球');})}
</script>

2.5、替换state

可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2><h2>用户爱好：{{ userStore.hobby }}</h2><button @click="changeUser">替换用户对象</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();// 修改整个store对象function changeUser() {userStore.$state = {userRealName: '李四',userName: 'lisi',passward: '654321',hobby: ['打篮球']}}
</script>

2.6、订阅状态

  • 可以通过 store 的 $subscribe() 方法查看状态及其变化，类似于 Vuex 的 subscribe 方法。 与常规的 watch() 相比，使用 $subscribe() 的优点是 subscriptions 只会在 patches 之后触发一次（例如，当使用上面的函数版本时）。
  • 本人试了下用wathch监听userStore，结果和使用$subscribe()一致，都只会触发一次。
  • 可能与watch的唯一区别是：$subscribe函数里面可以传入第二个参数{detached: true}，当组件销毁时，这个监听函数依旧会被保留，而没有第二个参数的$subscribe和watch将会跟着组件一起被销毁
代码
<template><h2>用户名称：{{ userStore.userRealName }}</h2><h2>用户账号：{{ userStore.userName }}</h2><h2>用户密码：{{ userStore.passward }}</h2><h2>用户爱好：{{ userStore.hobby }}</h2><button @click="changeUser">替换用户对象</button><button @click="changeUser2">替换用户对象2</button>
</template><script setup>import { useUserStore } from '@/store/user'import { watch } from 'vue'// 定义 storeconst userStore = useUserStore();userStore.$subscribe((mutation, state) => {console.log("subscribe", mutation, state)// 每次修改state，都会刷新localStorage里面的数据localStorage.setItem('userStore', JSON.stringify(state))})// 修改整个store对象function changeUser() {userStore.$patch({userRealName: '李四',userName: 'lisi',passward: '654321',hobby: ['打篮球']})}// 与上面写法一致，也只会触发一次watch 和 subscribe方法function changeUser2() {userStore.hobby.push('打篮球');}// 使用传统watchwatch(userStore, (val) => {console.log('watch：', val)})
</script>
效果

在这里插入图片描述

默认情况下，state subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 中）。 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription：

// 这个函数当组件被挂载后，将会一直存在！！！
userStore.$subscribe((mutation, state) => {console.log("subscribe", mutation, state)// 每次修改state，都会刷新localStorage里面的数据localStorage.setItem('userStore', JSON.stringify(state))
}, { detached: true })

3、Getters

3.1、定义getter

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用

代码
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {doubleCount: (state) => state.count * 2,},
})

3.2、使用getter

和state属性一样，直接使用userStore.xxx即可

<template><h2>count：{{ userStore.count }}</h2><h2>doubleCount：{{ userStore.doubleCount }}</h2><button @click="userStore.count++">修改count</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();</script>
效果

在这里插入图片描述

4.2、访问其他getter

  • 大多数时候，getter 只会依赖状态，但是，他们可能需要使用其他 getter。
  • 正因为如此，我们可以在定义常规函数时通过 this 访问到 整个 store 的实例*
  • 但是需要定义返回类型（在 TypeScript 中）。 这是由于 TypeScript 中的一个已知限制，并且不会影响使用箭头函数定义的 getter，也不会影响不使用 this 的 getter：
  • 案例没有用到TS，所以没有定义返回类型
userStore中
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {doubleCount: (state) => state.count * 2,doublePlusOne() {return this.doubleCount * 2 + 1},},
})
homeView中
<template><h2>count：{{ userStore.count }}</h2><h2>doubleCount：{{ userStore.doubleCount }}</h2><h2>doublePlusOne： {{ userStore.doublePlusOne }}</h2><button @click="userStore.count++">修改count</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();</script>
效果

在这里插入图片描述

4.3、访问其他store里的getter

  • 与计算属性一样，您可以组合多个 getter。 通过 this 访问任何其他 getter。
  • 即使不使用 TypeScript，您也可以使用 JSDoc 提示您的 IDE 类型：
userStore中
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {doubleCount: (state) => state.count * 2,// count是否小于10doublePlusOne() {return this.doubleCount * 2 + 1},otherGetter(state) {const useU2Store = useUserStore2();// 2 + (state.count * 2) + (state.count * 2 + 1) + state.countreturn useU2Store.doubleCount + this.doublePlusOne + state.count}},
})export const useUserStore2 = defineStore('user2', {state: () => ({count: 1,}),getters: {doubleCount: (state) => state.count * 2,},
})
homeView中
<template><h2>count：{{ userStore.count }}</h2><h2>doubleCount：{{ userStore.doubleCount }}</h2><h2>doublePlusOne： {{ userStore.doublePlusOne }}</h2><h2>otherGetter： {{ userStore.otherGetter }}</h2><button @click="userStore.count++">修改count</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();</script>
效果

在这里插入图片描述

4.4、将参数传递给 getter

  • Getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是，您可以从 getter 返回一个函数以接受任何参数
  • 在执行此操作时，getter 不再缓存，它们只是您调用的函数。
userStore中
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {doubleCount: (state) => state.count * 2,doublePlusOne(state) {return (addSum) => state.count + addSum;},},
})
homeView中
<template><h2>count：{{ userStore.count }}</h2><h2>doubleCount：{{ userStore.doubleCount }}</h2><h2>doublePlusOne： {{ userStore.doublePlusOne(10) }}</h2><button @click="userStore.count++">修改count</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();</script>
效果

在这里插入图片描述

4、Actions

4.1、定义action

  • Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑
  • 相比于vuex，省去了mutation
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {},actions: {increment() {// 通过this，获取state里面属性this.count++},decrement() {this.count--},// 异步方法async asyncChangeCount() {// 模仿异步请求const data = await new Promise(resolve => {setTimeout(() => {resolve(1233333333333)}, 1000)})this.count = data;}}
})

4.2、使用action

直接调用userState.xxx()方法即可

代码
<template><h2>count：{{ userStore.count }}</h2><button @click="addCount">count+1</button><button @click="deCount">count-1</button><button @click="asyncChangeCount">异步修改count</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();function addCount() {userStore.increment()}function deCount() {userStore.decrement();}function asyncChangeCount() {userStore.asyncChangeCount()}</script>
效果

在这里插入图片描述

4.3、访问其他action

和getters一样，直接使用this.xxxx()调用其他函数即可

import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {},actions: {// 无用，测试testFun(sum) {return this.count + sum;},increment() {// 直接使用this.xxx()调用其他action 相当于 +2this.count = this.testFun(1) + 1;},decrement() {// +2 -1，相当于+1this.count = this.testFun(2) - 1;},}
})

4.4、访问其他store的action

和getters里面一致，导入另一个store，在actions中调用xxxStore.xxx(xx)方法即可

import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),getters: {},actions: {increment() {const u2Store = useUserStore2();// 相当于 this.count + 2;this.count = this.count + u2Store.testFun(1) + 1;},decrement() {this.count--;},}
})export const useUserStore2 = defineStore('user2', {state: () => ({count: 1,}),getters: {},actions: {// 无用，测试testFun(sum) {return sum;},}
})

4.5、订阅action

  • 可以使用 store.$onAction() 订阅 action 及其结果。
  • 传递给它的回调在 action 之前执行。
  • after处理 Promise 并允许您在 action 完成后执行函数。
  • 以类似的方式，onError 允许您在处理中抛出错误。 这些对于在运行时跟踪错误很有用，类似于 Vue 文档中的这个提示。
  • $onAction()会返回一个函数，调用函数即可停止订阅
userStore代码
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({count: 1,}),actions: {increment() {return this.count--;},decrement() {return --this.count;},// 异步方法async asyncChangeCount(val = 520) {// 模仿异步请求const data = await new Promise(resolve => {setTimeout(() => {resolve(val)}, 1000)})this.count = data;}}
})
homeView代码
<template><h2>count：{{ userStore.count }}</h2><button @click="addCount">count+1</button><button @click="deCount">count-1</button><button @click="asyncChangeCount">异步修改count</button><button @click="unOnAction()">关闭onAction</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();// 每次调用完action后，都会执行const unOnAction = userStore.$onAction(({name, // action 的名字store, // store 实例args, // 调用这个 action 的参数after, // 在这个 action 执行完毕之后，执行这个函数onError, // 在这个 action 抛出异常的时候，执行这个函数}) => {console.log("action函数名：" + name + "，store实例：" + JSON.stringify(store) + "，参数" + args.toString());// 执行开始事件const now = Date.now();// action执行完成后回调，异步会等待最终执行完成after((result) => {console.log("action共执行了：" + (Date.now() - now) + "ms" + "，返回结果：" + result);})onError((error) => {console.log("action执行失败：" + error);})})function addCount() {userStore.increment()}function deCount() {userStore.decrement();}function asyncChangeCount() {userStore.asyncChangeCount(1314);}</script>
效果

在这里插入图片描述

Plugins

  • 由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：
    • 为 store 添加新的属性
    • 定义 store 时增加新的选项
    • 为 store 增加新的方法
    • 包装现有的方法
    • 改变甚至取消 action
    • 实现副作用，如本地存储
    • 仅应用插件于特定 store
  • 插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。
  • Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。
  • 插件只会应用于在 pinia 传递给应用后创建的 store，否则它们不会生效。

1、基本演示

1.1、userStore

import { defineStore } from 'pinia'
import { ref } from 'vue';export const useUserStore = defineStore('user', () => {const count = ref(0);return { count };
})export const useUserStore2 = defineStore('user2', () => {const count2 = ref(0);return { count2 };
})

1.2、main

import { createApp } from 'vue'
import App from './App.vue'import { createPinia } from 'pinia'const pinina = createPinia();function myPiniaPlugin() {// 创建的每个 store 中都会添加一个名为 `myPlugin` 的属性。// 在安装此插件后，插件可以保存在不同的文件中return {myPlugin: 'test'}
}
// 将该插件交给 Pinia
pinina.use(myPiniaPlugin);createApp(App)
.use(pinina)
.mount('#app')
1.3、效果

通过vue-devtools即可看出效果

在这里插入图片描述

在这里插入图片描述

2、参数介绍

Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。

export function myPiniaPlugin(context) {context.pinia // 用 `createPinia()` 创建的 pinia。 context.app // 用 `createApp()` 创建的当前应用(仅 Vue 3)。context.store // 该插件想扩展的 storecontext.options // 定义传给 `defineStore()` 的 store 的可选对象。// ...
}

从下图可以看出，每个store执行，都会调用一次插件函数(需要页面调用usexxxStore()后，才会执行)

在这里插入图片描述

3、扩展Store

可以直接通过在一个插件中返回包含特定属性的对象来为每个 store 都添加上特定属性

pinina.use(() => ({myPlugin: 'test'}));

也可以直接在 store 上设置该属性，但可以的话，请使用返回对象的方法，这样它们就能被 devtools 自动追踪到

pinina.use(({ store }) => store.myPlugin = 'test');

在这里插入图片描述

任何由插件返回的属性都会被 devtools 自动追踪，所以如果你想在 devtools 中调试 hello 属性，为了使 devtools 能追踪到 hello，请确保在 dev 模式下将其添加到 store._customProperties 中：

pinina.use(({ store }) => {store.myPlugin = 'test'// 确保你的构建工具能处理这个问题，webpack 和 vite 在默认情况下应该能处理。if (process.env.NODE_ENV === 'development') {// 添加你在 store 中设置的键值store._customProperties.add('myPlugin')}
});

在这里插入图片描述

  • 值得注意的是，每个 store 都被 reactive包装过，所以可以自动解包任何它所包含的 Ref(ref()、computed()…)。
  • 在没有 .value 的情况下你依旧可以访问所有计算属性的原因，也是它们为什么是响应式的原因。
const str = ref('test2');
pinina.use(({ store }) => {// 每个 store 都有单独的 `test` 属性store.myPlugin = 'test'store.hello = ref('test')// 它会被自动解包console.log(store.hello); // 'test'// 确保你的构建工具能处理这个问题，webpack 和 vite 在默认情况下应该能处理。if (process.env.NODE_ENV === 'development') {// 添加你在 store 中设置的键值store._customProperties.add('myPlugin')}// 所有的 store 都在共享 `str` 属性的值store.myPlugin2 = strconsole.log(store.myPlugin2); // 'test2'
});

在这里插入图片描述

4、添加新的 state

  • 如果你想给 store 添加新的 state 属性或者在服务端渲染的激活过程中使用的属性，你必须同时在两个地方添加它。。
    • 在 store 上，然后你才可以用 store.myState 访问它。
    • 在 store.$state 上，然后你才可以在 devtools 中使用它，并且，在 SSR 时被正确序列化(serialized)。
  • 需要注意的是，在一个插件中， state 变更或添加(包括调用 store.$patch())都是发生在 store 被激活之前，因此不会触发任何订阅函数。
pinia.use(({ store }) => {// 为了正确地处理 SSR，我们需要确保我们没有重写任何一个 // 现有的值if (!Object.prototype.hasOwnProperty(store.$state, 'hasError')) {// 在插件中定义 hasError，因此每个 store 都有各自的// hasError 状态const hasError = ref(false)// 在 `$state` 上设置变量，允许它在 SSR 期间被序列化。store.$state.hasError = hasError}// 我们需要将 ref 从 state 转移到 store// 这样的话,两种方式：store.hasError 和 store.$state.hasError 都可以访问// 并且共享的是同一个变量// 查看 https://cn.vuejs.org/api/reactivity-utilities.html#torefstore.hasError = toRef(store.$state, 'hasError')// 在这种情况下，最好不要返回 `hasError`// 因为它将被显示在 devtools 的 `state` 部分// 如果我们返回它，devtools 将显示两次。
})

5、添加新的外部属性

当添加外部属性、第三方库的类实例或非响应式的简单值时，你应该先用 markRaw() 来包装一下它，再将它传给 pinia。下面是一个在每个 store 中添加路由器的例子：

import { markRaw } from 'vue'
// 根据你的路由器的位置来调整
import { router } from './router'pinia.use(({ store }) => {store.router = markRaw(router)
})

6、在插件中调用 $subscribe

  • 你也可以在插件中使用 store.KaTeX parse error: Expected 'EOF', got '#' at position 63: …epts/state.html#̲subscribing-to-…onAction 。

  • 这样每个store都会执行相同的订阅

pinia.use(({ store }) => {store.$subscribe(() => {// 响应 store 变化})store.$onAction(() => {// 响应 store actions})
})

7、添加新的选项

在定义 store 时，可以创建新的选项，以便在插件中使用它们。例如，你可以创建一个 debounce 选项，允许你让任何 action 实现防抖。

defineStore('user', {actions: {increment() {count.value++;}},// 这将在后面被一个插件读取debounce: {// 让 action searchContacts 防抖 300msincrement: 1000,},
})

然后，该插件可以读取该选项来包装 action，并替换原始 action：

// 使用任意防抖库
import debounce from 'lodash/debounce'pinia.use(({ options, store }) => {if (options.debounce) {// 我们正在用新的 action 来覆盖这些 actionreturn Object.keys(options.debounce).reduce((debouncedActions, action) => {// {}.increment = debounce(originAction, 1000)debouncedActions[action] = debounce(store[action],options.debounce[action])return debouncedActions}, {})}
})

注意，在使用 setup 语法时，自定义选项作为第 3 个参数传递：

export const useUserStore = defineStore('user', () => {const count = ref(0);function increment() {count.value++;}return { count, increment };
}, {debounce: {increment: 1000}
})

在这里插入图片描述

Setup Store

  • defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。
  • option Store
    • 与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
    • 你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。
    • 为方便上手使用，Option Store 应尽可能直观简单。
  • setup Store
    • 与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。
    • 在 Setup Store 中：
      • ref() 就是 state 属性
      • computed() 就是 getters
      • function() 就是 actions
    • Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。

userStore

import { defineStore } from 'pinia'
import { computed, ref } from 'vue';export const useUserStore = defineStore('user', () => {const count = ref(0);const doubleCount = computed(() => count.value * 2);function increment() {count.value++;}return { count, doubleCount, increment };
})

homeView

<template><h2>count：{{ userStore.count }}</h2><h2>doubleCount：{{ userStore.doubleCount }}</h2><button @click="addCount">count+1</button>
</template><script setup>import { useUserStore } from '@/store/user'// 定义 storeconst userStore = useUserStore();function addCount() {userStore.increment()}
</script>

效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/225571.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Graylog日志搜索技巧

Graylog日志搜索技巧

graylog搜索日志用的语法是Syntax接近Lucene&#xff0c;搜起来比较方便 Search query languagehttps://go2docs.graylog.org/4-0/making_sense_of_your_log_data/writing_search_queries.html?tocpathSearching%20Your%20Log%20Data|_____1 1.Syntax 语法 1.1 基本匹配 搜…
阅读更多...
Hive04_DDL操作

Hive04_DDL操作

Hive DDL操作 1 DDL 数据定义 1.1 创建数据库 CREATE DATABASE [IF NOT EXISTS] database_name [COMMENT database_comment] [LOCATION hdfs_path] [WITH DBPROPERTIES (property_nameproperty_value, ...)];[IF NOT EXISTS] &#xff1a;判断是否存在 [COMMENT database_c…
阅读更多...
【C语言】指针详解（四）

【C语言】指针详解（四）

目录 1.assert断言 2.指针的使用和传址调用 2.1strlen的模拟使用 2.2传值调用和传址调用 1.assert断言 assert.h头文件定义了宏 assert()&#xff0c;用于在运行时确保程序符合指定条件&#xff0c;如果不符合&#xff0c;就报错终止运行。这个宏常常被称为“断言”。 例如…
阅读更多...
系列十五（面试）、RocketMQ消息重复消费问题

系列十五（面试）、RocketMQ消息重复消费问题

一、RocketMQ消息重复消费问题 1.1、官网 1.2、消息重复被消费原因 通过上述官网的描述我们可以知道&#xff0c;RocketMQ中的消息是存在重复消费的情况的。那么消息为什么会被重复消费呢&#xff1f;先来回顾一下RocketMQ的消息是怎么发送和接收的&#xff1a; 从上图可以看出…
阅读更多...
TYPE C 接口知识

TYPE C 接口知识

1、Type C 概述 Type-C口有4对TX/RX分线&#xff0c;2对USBD/D-&#xff0c;一对SBU&#xff0c;2个CC&#xff0c;另外还有4个VBUS和4个地线。 当Type-C接口仅用作传输DP信号时&#xff0c;则可利用4对TX/RX&#xff0c;从而实现4Lane传输&#xff0c;这种模式称为DPonly模式…
阅读更多...
概率论1：下象棋问题(3.5)

概率论1：下象棋问题(3.5)

每日小语 时刻望着他人的眼色行事&#xff0c;是腾飞不了的。自己怎么想就积极地去做&#xff0c;这是需要胆量的。——广中平佑 题目 甲、乙二人下象棋&#xff0c; 每局甲胜的概率为a,乙胜的概率为b. 为简化问题&#xff0c;设没有和局的情况&#xff0c;这意味着a b1. 设想…
阅读更多...
uni-app 命令行创建

uni-app 命令行创建

1. 首先创建项目&#xff0c;命令如下: npx degit dcloudio/uni-preset-vue#vite-ts uni-app-demo如果出现报错&#xff0c;如下图. 大概率就是没有目录C:\Users\Administrator\AppData\Roaming\npm 解决办法&#xff1a; 创建目录 C:\Users\Administrator\AppData\Roaming\n…
阅读更多...
有关List的线程安全、高效读取：不变模式下的CopyOnWriteArrayList类、数据共享通道:BlockingQueue

有关List的线程安全、高效读取：不变模式下的CopyOnWriteArrayList类、数据共享通道:BlockingQueue

有关List的线程安全 队列、链表之类的数据结构也是极常用的&#xff0c;几乎所有的应用程序都会与之相关。在java中&#xff0c; ArrayList和Vector都使用数组作为其内部实现。两者最大的不同在与Vector是线程安全的。 而ArrayList不是。此外LinkedList使用链表的数据结构实现…
阅读更多...
IP地址在网络安全中的关键作用

IP地址在网络安全中的关键作用

IP地址是互联网世界中的重要标识符&#xff0c;它在网络安全领域发挥着至关重要的作用。这些地址不仅帮助设备在网络上找到彼此&#xff0c;还在多个方面有助于维护网络的完整性、机密性和可用性。IP地址在网络安全中的关键作用以及实际应用有哪些呢&#xff1f; 1、身份验证和…
阅读更多...
【自然语言处理】第2部分：识别文本中的个人身份信息

【自然语言处理】第2部分：识别文本中的个人身份信息

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…
阅读更多...
人工智能：网络犯罪分子的驱动力

人工智能：网络犯罪分子的驱动力

随着 2024 年的临近&#xff0c;是时候展望今年的网络安全状况了。由于网络犯罪日益复杂&#xff0c;预计到 2025 年&#xff0c;全球网络安全成本将增至 10.5 万亿美元。 人工智能的使用不断发展&#xff0c;网络犯罪分子变得越来越有创造力 我们注意到&#xff0c;联邦调查…
阅读更多...
sklearn 逻辑回归Demo

sklearn 逻辑回归Demo

逻辑回归案例 假设表示 基于上述情况&#xff0c;要使分类器的输出在[0,1]之间&#xff0c;可以采用假设表示的方法。 设 h θ ( x ) g ( θ T x ) h_θ (x)g(θ^T x) hθ​(x)g(θTx)&#xff0c; 其中 g ( z ) 1 ( 1 e − z ) g(z)\frac{1}{(1e^{−z} )} g(z)(1e−z)1​…
阅读更多...
操作无法完成(错误 0x000006ba)，Windows 11 PDF打印机无法使用解决办法

操作无法完成(错误 0x000006ba)，Windows 11 PDF打印机无法使用解决办法

操作无法完成(错误 0x000006ba)&#xff0c;Windows 11 PDF打印机无法使用解决办法 解决方式一 先重启一次电脑&#xff0c;看看是否可以解决问题。 解决方式二 重新启动 Printer Spooler 服务
阅读更多...
Vue3中的混入（mixins）

Vue3中的混入（mixins）

本文主要介绍Vue3中的混入&#xff08;mixins&#xff09;。 目录 一、在普通写法中使用混入&#xff1a;二、在setup写法中使用混入&#xff1a; 混入是Vue中一种用于在组件中共享可复用功能的特性。在Vue 3中&#xff0c;混入的使用方式有所改变。 一、在普通写法中使用混入…
阅读更多...
Java开发框架和中间件面试题(3)

Java开发框架和中间件面试题(3)

14.Spring事务中的隔离级别有哪几种&#xff1f; 在TransactionDefinition接口中定义了五个表示隔离级别的常量&#xff1a; 1⃣️ISOLATION DEFAULT&#xff1a;使用后端数据库默认的隔离级别&#xff0c;Mysql默认采用的可重复读隔离级别&#xff1b;Oracle默认采用的读已提…
阅读更多...
蓝桥杯2020年5月青少组Python程序设计国赛真题

蓝桥杯2020年5月青少组Python程序设计国赛真题

1、 上边是一个算法流程图，最后输出的b的值是（） A.377 B.987 C.1597 D.2584 2、 3、如果整个整数X本身是完全平方数,同时它的每一位数字也都是完全平方数我们就称X 是完美平方数。前几个完美平方数是0、1、4、9、49、100、144......即第1个完美平方数是0,第2个是 1,第3个…
阅读更多...
.NET CORE 无法调试 当前不会命中断点

.NET CORE 无法调试 当前不会命中断点

多个项目直接可以设置项目的属性->生成->输出的配置文件输出地址 然后路径统一输入该项目的bib/debug/.netcorex.x就可以了
阅读更多...
浅学Vue3

浅学Vue3

安装 vue项目 npm init vuelatest 回车装包 npm install 路由 安装 Router npm install vue-router4 -S项目根目录新建 router --> index.js vue2中 index.jsimport Vue from vue; import VueRouter from vue-router; import Home from ../views/Home.vue;Vue.use(V…
阅读更多...
C语言—每日选择题—Day62

C语言—每日选择题—Day62

第一题 1. 在使用标准C库时&#xff0c;下面哪个选项使用只读模式打开文件&#xff1f; A&#xff1a;fopen("foo.txt", "r") B&#xff1a;fopen("foo.txt", "r") C&#xff1a;fopen("foo.txt", "w") D&#xf…
阅读更多...
钦丰科技(安徽)股份有限公司携卫生级阀门管件盛装亮相2024发酵展

钦丰科技(安徽)股份有限公司携卫生级阀门管件盛装亮相2024发酵展

钦丰科技(安徽)股份有限公司携卫生级阀门管件盛装亮相2024济南生物发酵展&#xff01; 展位号&#xff1a;2号馆A65展位 2024第12届国际生物发酵产品与技术装备展览会&#xff08;济南&#xff09;于3月5-7日在山东国际会展中心盛大召开&#xff0c;展会同期将举办30余场高质…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023