Vue项目安装Pinia

        在Vue.js 项目中，状态管理是非常重要的一环，它能够帮助我们更好地管理应用程序的状态和数据流。而 Pinia 是一个专为 Vue 3 设计的状态管理库，提供了简洁的 API 和强大的功能，帮助我们更轻松地管理状态。

        在本文中，博主将详细介绍如何在 Vue 3 的项目中安装 Pinia 。

1.定位到项目根路径下 (src目录同级)

        在你的 Vue 项目中打开终端，通过 npm 或者 yarn 包管理器安装 Pinia：

# npm 包管理器
npm install pinia

# yarn 包管理器
yarn add pinia

2.创建一个 pinia 实例 (根 store) 并将其传递给应用：

// main.js 文件中  # 或者 main.ts 文件中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

        这里也可以将 pinia 挂载到项目的 store 目录下，最后在 main.js 或 main.ts 中注册即可 

// @/store/index.ts 文件中

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

// 导出
export default pinia;

// main.ts 文件中

import { createApp } from 'vue';
import App from '/@/App.vue';
// 引入 pinia
import pinia from '/@/stores/index';

const app = createApp(App);

app.use(pinia).mount('#app');

3.创建新的 store 开始使用

/* 
 * orderStore.js
 * 首先，我们定义一个store。  ==> 这里博主采用组合式API写法
 */
import { defineStore } from 'pinia'
import { ref } from 'vue'

// 这里，第一个参数是你的应用中 Store 的唯一 ID。==> 我的是 orderInfo
export const useOrderStore = defineStore('orderInfo', () => {
    
    // 可以在任意组件中访问 orderInfo 变量
    const orderInfo = ref()

    const setOrderInfo = (data) => {
        orderInfo.value = data
    }
    
    const getOrderInfo = () => {
        return orderInfo.value
    }

    return { orderInfo, setOrderInfo, getOrderInfo }
})

最后，在 Vue组件中引入这个 store，并通过函数式调用 store 即可进行状态(数据)共享了