Vue最新状态管理工具Pinia——Pinia的安装与使用

知识回调（不懂就看这儿！）

知识专栏	专栏链接
Vuex知识专栏	https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482
Vuex官方文档	https://vuex.vuejs.org/zh/
Pinia官方文档	https://pinia.web3doc.top/

场景复现

上期文章中我们介绍了pinia的核心概念以及pinia相比vuex的优势，给出了几个能够展现pinia优势的实例。本期文章则切入项目实战，从安装和使用pinia开始，一步一步学习如何将pinia运用到项目实战中去。

一、环境搭建

1.创建项目

环境搭建还是沿用vite构建项目的方法，不知道怎么构建的小伙伴可以去vue专栏找找看哦~（用vite构建vue项目还是非常轻量快捷的！！强烈推荐使用！！）
我们依然使用npm包指令来使用vite构建项目，在命令行输入以下指令即可

npm init vite

输入后根据提示选择vue项目，选择TypeScript语言构建项目即可。

2.安装pinia

安装pinia的方法有很多，可以用npm，可以用yarn，我们还是沿用npm包进行安装。

npm install pinia

在命令行输入以上指令后，等待安装成功即可。安装成功后，在package.json文件中，查看下载的依赖，如果有pinia和对应的版本号，即为下载成功。

二、基本使用

创建完vue项目并且成功安装pinia之后，我们首先要做的，一定要创建pinia实例，并将其全局挂载！！（不论是pinia还是其他的依赖，只要你需要使用，并且使用频率很频繁，都建议全局挂载）

1.创建pinia示例并挂载

// main.ts
import {
    createApp } from 'vue'
import App from './App.vue'
import {
    createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
createApp(App).use(pinia).mount('#app')

2.基本使用

访问state

我们可以直接通过state.访问

const store = useStore()
store.counter++

使用getters

要注意，在pinia中，Getters和state里面不能使用相同的名字

export const useStore = defineStore('main', {
   
  state: () => ({
   
    counter: 0,
  }),
  getters: {
   
    doubleC