全新的 Vue3 状态管理工具：Pinia

2021-12-17 09:35:41 阅读：221 来源： 互联网

标签：count pinia 管理工具 state Api Pinia Vue3 import computed

Vue3 发布已经有一段时间了，它采用了新的响应式系统，而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统，官方的状态管理库 Vuex 也在适配中，为此官方提出了一个 Vuex 5 的全新提案。

支持两种语法创建 Store：Options Api 和 Composition Api；
删除 mutations，只支持 state、getters、actions；
模块化的设计，能很好支持代码分割；
没有嵌套的模块，只有 Store 的概念；
完整的 TypeScript 支持；

在这个提案下方，有个评论很有意思。简单翻译一下：

好巧不巧，Vuex5 的提案，与 Pinia 实现的功能不能说毫无关系，只能说一模一样，今天的文章就来给大家介绍一下这个菠萝。

安装

在现有项目中，用过如下命令进行 Pinia 模块的安装。

# yarn
yarn add pinia@next
# npm
npm i pinia@next

安装完成后，需要在 Vue3 项目的入口文件中，进行导入安装。

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')

上手

要使用 Pinia 的话，只需要定义一个 store，然后在用到该数据的地方进行导入。

定义 Store

import { defineStore } from "pinia"

// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore({
  // 每个 store 的 id 必须唯一
  id: 'counter',
  // state 表示数据源
  state: () => ({
    count: 0
  }),
  // getters 类似于 computed，可对 state 的值进行二次计算
  getters: {
    double () {
     // getter 中的 this 指向 
 
标签：count,pinia,管理工具,state,Api,Pinia,Vue3,import,computed	

来源： https://www.cnblogs.com/hhj-blog/p/15700883.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

全新的 Vue3 状态管理工具：Pinia

安装

定义 Store