2k字轻松入门Pinia，猴子都可以看懂的教程

前言

都什么年代了，还在用传统状态管理库？快来学习Pinia吧！

Pinia这个名字的来源也很有意思，在西班牙语中，Pinia是菠萝这个词最相似的英语发音，而一个菠萝是由一组组单独的花，结合在一起的，创造了多个水果，与stores类似，每一个都是独立的，但最终都会有着联系

当我们点开vuex的github库的时候，会看见官方的提示Pinia is now the new default，而作为Vue的新一代的官方状态管理库，Pinia有着更多优势，解决了很多Vuex所留下的问题，在编写的时候，会更有逻辑性，接下来就让我们去试着了解一下吧！

Pinia优点

• vue3 vue2均支持
• 抛弃了Mutation的操作，只有state、getter和action
• Actions支持同步和异步
• 支持使用插件扩展Pinia功能
• 不需要嵌套模块，更加符合Vue3的Composition api
• 支持typescript
• 代码更加的简洁

用Pinia方式创建一个store

我们先快速创建一个空项目，再安装Pinia:

npm install pinia 

虽然Pinia支持vue2，但如果你使用的vue版本低于Vue2.7,还需独立安装composition api: @vue/composition-api （这里建议直接升到Vue2.7，相较于Vue3来说，跨度不会太大，但对Vue的生态支持的更好）

在main.ts中对Pinia进行引入：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
​
import App from './App.vue'
​
​
const app = createApp(App)
​
app.use(createPinia())
​
app.mount('#app') 

接着，我们在src/store中创建counter.ts，并写下基础模板：

import { defineStore } from "pinia";
​
export const mainStore = defineStore('main', {
  state: () => {
    return {
      helloWord: 'HelloWorld'
  }},
  getters: {
​},
  actions: {
​}
}) 

创建好仓库mainStore(仓库名)后，我们将在组件中进行使用

<template>
  <div class="">{
  { store.helloWord }}</div>
</template>
​
<script lang="ts" setup> import { mainStore } from "../store/counter";
const store = mainStore(); </script>
​
<style scoped></style> 
<