关于pinia的介绍

简介 | Pinia

1.介绍

         Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库，并且 Vue 的官方状态管理库已经更改为了 Pinia 。在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5 ，这也意味不会再出 5 版本了。

2.优点

（1）更加轻量级，压缩后提交只有 1.6kb 。

（2）完整的 TS 的支持， Pinia 源码完全由 TS 编码完成。

（3）移除 mutations ，只剩下 state 、 actions 、 getters 。

（4）没有了像 Vuex 那样的模块镶嵌结构，它只有 store 概念，并支持多个 store ，且都是互

相立隔离的。当然，你也可以手动从一个模块中导入另一个模块，来实现模块的镶嵌结构。

（5）无需手动添加每个 store ，它的模块默认情况下创建就自动注册。支持 ue DevTools 。

（6）更友好的代码分割机制，传送门。

（7）Pinia 配套有个插件 pinia-plugin-persist进行数据持久化，否则一刷新就会造成数据

丢失

3.pinia和vuex的区别

（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据

（2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

（3）pinia语法上比vuex更容易理解和使用，灵活。

（4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

（5）pinia state是一个对象返回一个对象和组件的data是一样的语法

4.使用方法

先在命令行中输入npm install pinia安装，然后在vue3项目的main.js中引入pinia:

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

如果你使用的是 Vue 2，你还需要安装一个插件，并在应用的根部注入创建的 pinia：

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。 
  pinia,
})

然后就可以在js文件里面使用：

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions