来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

特点

Pinia是一个全局状态管理工具，完爆了VueX。官网

  • 完整的Vue3+TS支持
  • 足够轻量，压缩后的体积只有1kb左右
  • 去除mutations。只有state、getters、actions
  • actions支持同步和异步
  • 代码扁平化没有模块嵌套，只有store的概念；store之间可以自由使用，每一个store都是独立地
  • 无需手动添加store，store一旦创建便会自动添加
  • 支持Vue2和Vue3

安装

添加依赖：

1
npm install pinia -s

在main.ts中引入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// Vue2要这么写
// import { createPinia, PiniaVuePlugin } from "pinia" 
// Vue.use(PiniaVuePlugin)
// const pinia = createPinia()
// new Vue({
//   el: '#app',
//   // other options...
//   // ...
//   // note the same `pinia` instance can be used across multiple Vue apps on
//   // the same page
//   pinia,
// })

// Vue3要这么写
import { createPinia } from "pinia"
const store = createPinia()
createApp(App).use(store).mount('#app')