Pinia进阶：优雅的setup（函数式）写法+封装

信任在座各位如果使用Vue生态开辟项目环境下，对Pinia状态管理库应该有所听闻或正在使用，如果还没打仗到Pinia，这篇文章可以帮你快速入门，并如安在企业项目中更优雅封装使用。

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更轻易
  
• 极其轻便(体积约 1KB)
  
• store 的 action 被调理为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
  
• 支持多个Store
  
• 支持 Vue devtools、SSR 和 webpack 代码拆分
  

举个例子：某项目有3个store「user、job、pay」，别的有2个路由页面「首页、个人中心页」，首页用到job store，个人中心页用到了user store，分别用Pinia和Vuex对其状态管理。

如果你对Pinia使用熟悉，可以略过这part?

• 使用options API模式界说，这种方式和vue2的组件模子形式雷同，也是对vue2技能栈开辟者较为友爱的编程模式。
  import { defineStore } from 'pinia';// 使用options API模式界说export const useCounterStoreForOption = defineStore('counterForOptions', {  // 界说state  state: () => {    return { count1: 1 };  },  // 界说action  actions: {    increment() {      this.count1++;    }  },  // 界说getters  getters: {    doubleCount(state) {      return state.count1 * 2;    }  }});复制代码
  
• 使用setup模式界说，符合Vue3 setup的编程模式，让结构更加扁平化，个人保举保举使用这种方式。
  import { ref } from 'vue';import { defineStore } from 'pinia';// 使用setup模式界说export const useCounterStoreForSetup = defineStore('counterForSetup', () => {  const count = ref<number>(1);  function increment() {    count.value++;  }  function doubleCount() {    return count.value * 2;  }  return { count, increment, doubleCount };});复制代码
  

• 方法1：在业务组件创建个函数，单点击”转职“时，获取3个store并且更新它们的值。
  
• 方法2：抽象一个新pinia store，store里有个”转职“的action，当玩家转职时，相应这个action，在action更新3个store的值。
  

• [人物属性]
  
• [装备]
  
• [技能]