Pinia 快速入门

Pinia 是什么?

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3
本文只讲 Pinia 在 Vue3 中的使用, 在 Vue2 中使用略有差异，参考 官方文档

Pinia 优势

符合直觉，易于学习
极轻， 仅有 1 KB
模块化设计，便于拆分状态

安装 Pinia

安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本

# 使用 npm
npm install pinia@next

创建一个 pinia（根存储）并将其传递给应用程序：

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

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

核心概念与基本使用

Store

Store 是一个保存状态和业务逻辑的实体，可以自由读取和写入，并通过导入后在 setup 中使用
创建一个 store

// store.js
import { defineStore } from "pinia";
import { otherState } from '@/store/otherState.js'

export const useStore = defineStore({
    id: "myGlobalState",
    state: ()=>({
        count: 1
    }),
    getters: {
        // 使用参数
        countPow2(state){
            return state.count ** 2
        },
        // 获取其他Getter,直接通过this
        countPow2Getter(){
            return this.countPow2
        },
        otherStoreCount(){
            const otherStore = otherState()
            return otherStore.count
        }
    },
    actions: {
        countPlusOne(){
            this.count++
        },
        countPlus(num){
            this.count += num
        }
    }
})

OtherStore

// otherStore.js
import { defineStore } from 'pinia'

export const otherState = defineStore({
    id: 'otherState',
    state: ()=>({
        count: 5
    })
})

使用 Store

<template>
  <div class="hello">
    <button @click="add">增加</button>
    <br/>
    {{store.count}}
    <br/>
    {{store.otherStoreCount}}
  </div>
</template>

<script>
import { useStore } from '@/store/store.js';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    const store = useStore()

    const add = ()=>{
      store.countPlusOne()
    }

    return {
      store,
      add
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

总结

Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展 官方文档 Plugins
Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见
Pinia 的使用感受类似于 Recoil，但没有那么多的概念和 API，主体非常精简，极易上手（Recoil 是 Facebook 官方出品的用于 React 状态管理库，使用 React Hooks 管理状态）
Pinia 2 目前还在 Beta 状态，不建议在生产环境中使用，不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案