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 指向