Pinia在Vue3中的使用方式

一、Pinia和Vuex的区别：

1. pinia没有mutations，只有：state、getters、actions；
2. pinia分模块不需要modules（vuex分模块需要modules）；
3. TypeScript支持很好；
4. pinia体积更小（性能更好）。

二、Pinia的使用流程：

     1.安装：

npm i pinia

     2.创建store文件夹，store/index.ts下创建并暴露：

import { createPinia } from 'pinia';

const pinia = createPinia();
export { pinia };

     3.main.ts中引入并注册使用：

import { pinia } from @store/index.ts;

app.use(pinia);

     4.store文件夹下新建modules文件夹，分模块创建ts文件，列如userStore.ts:

import { defineStore } from 'pinia';

export const useUserStore = defineStore('useUserStore', {
  state: () => {
    return {
      userName: "Worship",
    }
  },
  getters:{},
  actions:{
    // 修改用户姓名
    setUserName(val) {
      this.userName = val;
    }
  },
})

     5.组件中使用：

<script setup lang="ts">
import { useUserStore } from '@store/modules/userStroe.ts';

const userStore= useUserStore();
let { userName } = userStore;
console.log(userName); // Worship
</script>

     6.修改userStore.ts的state数据：

<script setup lang="ts">
import { useUserStore } from '@store/modules/userStroe.ts';

const userStore= useUserStore();
const changeUserName() {
  // 调用actions的方法
  userStore.setUserName("HF");
}
</script>