Vue3 & pinia 的使用

一、Pinia 的介绍与作用

Pinia 是 Vue 官方最新推荐的、取代传统 Vuex 的一款工具，可以理解为 Vuex 的进阶版，它有几点好处：

1、数据结构更简单，简化 Vuex 声明繁琐的 module 嵌套结构带来的问题，一切都是扁平式的。

2、更好用、简洁明了的语法糖，就像 Vue3 Steup 那样，更新数据直接赋值，不再像 Vuex 那样要经过几个步骤。

3、更友好的兼容、支持 TypeScript 类型推导，不再像 Vuex 那样手动定义一套复杂的 TS 。

二、Pinia 安装&引入

2.1 安装依赖

npm i pinia
or
yarn add pinia

2.2 引入依赖

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

三、使用方式1

3.1 声明定义

随意建个文件并以 use 开头作为文件名，例如：useCounter.js，示例代码如下：

useXXX 仅作为一种声明规范，看你心情定义。

// src/store/useCounter.js
import {
    defineStore } from 'pinia'
export const userCounter = defineStore('counter', {
   
  state: () => ({
   
    count: 0,
  }),

  getters: {
   
    doubleCount: (state) => state.count