Pinia的使用

一、前言

Pinia是新一代的轻量级状态管理库，同时支持Vue2.x版本的Option API和Vue3版本的 setup Compostion API开发模式，完整兼容Ts写法，是vuex团队成员开发。学习成本比较低，看一遍基本就可以上手，可以在vue devtools中查看调试。

二、跟vuex相比的优点

体积比较小（约为1kb）

去掉了mutations的概念，减少代码冗余

没有modules配置，每一个仓库是有definStore生成，各个代码块之间独立性更强。

三、使用步骤

1. 安装依赖npm i pinia -s
2. 将pinia挂载到Vue根实例上

//index.ts

import { createPinia } from "pinia";
import App from "./index.vue";

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

app.use(pinia)

3. 创建模块，定义字段，本示例采用Compostion-API风格的API

//store/index.ts

import { defineStore } from "pinia";
import { ref } from "vue";

export const userStore = defineStore("user", ()=>{
  const nickName = ref<string>('')

  function changeName(name: string) {
    nickName.value = name;
  }

  return {nickName, changeName}
});

4. 在页面中使用，只需引入对应的模块

// index.vue
<template>
...
</template>

<script lang='ts' setup>
  import { userStore } from "@/store/index";
  const _userStore = userStore()

  function handleChangeName() {
    // 1. 调用方法修改
    _userStore.changeName("liShuai")
    // 2. 直接修改
    _userStore.nickName = "liShuai"
  }
</script>

四、拓展

pinia进阶