Pinia——Vue 的存储库

文章目录

什么是 Pinia?
Pinia 的特点
与 Vuex 的比较
基本使用

什么是 Pinia?

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。是 2019 年由 Vuex 官方成员设计一个全新 Vue 的状态管理库。

Pinia 的特点

1、对 Vue2 和 Vue3 提供很好的支持，也就是说老项目也可以使用 Pinia
2、抛弃了 Mutations 的操作，只有 state、getters 和 actions。极大的简化了状态管理库的使用，让代码编写更加容易直观
3、不需要嵌套模块，符合 Vue3 的 Composition api，让代码更加扁平化
4、完整的 Typescript 支持
5、不能与 Vuex 混用
6、热模块更换：在不重新加载页面的情况下修改 Store；在开发时保持任何现有状态
7、服务器端渲染支持
8、非常轻量，只有1kb的大小

与 Vuex 的比较

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

基本使用

// 安装
npm install pinia

在 main.js 中引入 pinia 并创建容器挂载到根实例上

import { createPinia } from 'pinia'
const pinia = createPinia()// 挂载
createApp(App).use(pinia).mount('#app')

在 src 下创建 store/index.js
容器名称要确保唯一性，将来把所有容器挂载到隔壁容器上，根据唯一的值来获取当前容器，类似于对象的 key

import { defineStore } from 'pinia'export const mainStore = defineStore('mainStore',{/*** 存储全局状态* 必须是箭头函数：为了在服务器端渲染的时候避免交叉请求导致数据状态污染* TS 类型推导 */state:() => {return {count: 0,list: [1, 2, 3, 4]                      }     },/*** 用来封装计算属性，有缓存功能 类似于 computed*/getters: {},/*** 编辑业务逻辑 类似于 methods*/actions: {}})

在组件中使用

// countRender.vue
<script lang="ts" setup>
import { mainStore } from '../store';const store =mainStore()</script><template><div>{{store.count}}</div>
</template>// buttonAddCount.vue
<script lang="ts" setup>
import { mainStore } from '../store';const store =mainStore()const clickHandle=()=>{store.count++
}</script><template><button @click="clickHandle">+1</button>
</template>

注意：store 是一个用 reactive 包裹的对象，这意味着不需要在 getter 之后写 .value，但是，就像 setup 中的 props 一样
我们不能对其进行解构

以下是错误示范：

<script lang="ts" setup>
import { mainStore } from '../store';const store =mainStore()
// 这里不起作用，因为它会破坏响应式
// 这和从 props 解构是一样的
const { count, list } = store;</script><template><div>{{store.count}}</div>
</template>

为了从 store 中提取属性同时保持其响应式，需要使用官方提供的 storeToRefs()。
以下是正确使用：

<script lang="ts" setup>
import { mainStore } from '../store';
import { storeToRefs } from 'pinia;  // 引入 storeToRefsconst store =mainStore()
// count 和 list 是响应式引用
const { count, list } = storeToRefs(store);</script><template><div>{{store.count}}</div>
</template>

Pinia——Vue 的存储库相关推荐

linux存储库rep 61082,安装informatic过程中的错误
1.Check if the DISPLAY variable is set export DISPLAY=192.168.3.201:0.0 在注销用户并切换到oracle或者infa 用户,就可以 ...
CodeGen准备存储库
CodeGen准备存储库 CodeGen几乎总是与提供用于生成源文件的元数据的存储库结构一起使用,并且许多令牌需要使用存储库结构. 基本要求是有一个结构定义,并且该结构定义包含一个或多个字段定义.有些 ...
github组织存储库使用_为什么我不使用您的GitHub存储库
github组织存储库使用 by Sam Westreich, PhD 由Sam Westreich博士为什么我不使用您的GitHub存储库 (Why I'm not using your GitH ...
注意！今日起 GitHub 新建存储库的默认分支就不叫“master”了！
整理 | 郑丽媛头图 | CSDN下载自东方IC GitHub 宣布,自2020年10月1日起,在 GitHub 平台上创建的所有源代码存储库都将默认命名为 main ,而非原本的 master . ...
如何在GitHub上重命名存储库？
本文翻译自:How do I rename a repository on GitHub? I wanted to rename one of my repositories on GitHub, b ...
存储库访问被拒绝。通过部署密钥进行访问是只读的
本文翻译自:Repository access denied. access via a deployment key is read-only After successfully cloning ...
如何从Subversion存储库中git-svn克隆最后n个修订版？
本文翻译自:How to git-svn clone the last n revisions from a Subversion repository? Problem 问题 How do you ...
如何在github存储库中添加屏幕截图到README？
本文翻译自:How to add screenshot to READMEs in github repository? Is it possible to place a screenshot in ...
将现有Git存储库推送到SVN
我一直在用Git完成所有工作并推送到GitHub. 我对软件和网站都非常满意,我不想在此时改变我的工作方式. 我的博士生顾问要求所有学生将他们的工作保存在大学托管的SVN存储库中. 我已经找到大量关于 ...