pinia 在VUE3+Vite+stuep语法糖中的使用

 推荐文章

Vue3 小菠萝 Pinia使用_vue3 pinia_我是ed.的博客-CSDN博客

1. 安装pinia

npm install pinia

2.mian.js中注册全局引用，挑选需要的使用

//mian.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// pinia状态管理
import { createPinia } from 'pinia'
import "./assets/css/main.css"
// 引入Ant Design
import * as AntdIcon from "@ant-design/icons-vue"
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
// 引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
// 引入elementUI
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import MyComponent from './App.vue'

// 动态import基础组件
import Rzpop from './components/rzpop.vue'
import CloudPlay from './components/CloudPlay.vue'
import LatticeAssistant from './views/play/components/LatticeAssistant.vue'

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


// 注册所有图标 Ant Design图标
for (const i in AntdIcon) {
  app.component(i, AntdIcon[i])
}
//注册所有图标 elementUI图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}



app.component(
  // 注册的名字
  'CloudPlay',
  // 组件的实现
  CloudPlay
)
app.component('Rzpop', Rzpop)
app.component('LatticeAssistant',LatticeAssistant)

app.use(pinia)
app.use(Antd)
app.use(router)
// 导入axios
app.use(VueAxios,axios)
// 导入elementUI
app.use(ElementPlus)

app.mount('#app')

3. 使用

 3.1 user.js

//user.js

import { defineStore } from "pinia"

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      info: {}, // 用户信息
    }
  },
  getters: {},
  actions: {}
})

3.2 index.js---此份代码主要是pinia在mian.js全局注册前，注册全局组件准备的

//index.js
import { createPinia } from 'pinia';
const pinia = createPinia();

export default pinia;

4.添加数据

//user.js


import { getUser } from "../api/user"
import { localKey } from "./constant"
import { useUserStore } from "../store/user"
import { setUserInfo } from "./clientMethods"
// import store from '../store/index.js'

const userStore = useUserStore()//当前使用
// const userStore = useUserStore(store) //全局组件使用

/**
 * 获取用户信息
 */
export const getUserInfo = () => {
    if(localStorage.getItem(localKey.TOKEN)) {
        getUser().then(res => {
            userStore.info = res //这里获取并修改数据
            setUserInfo(JSON.stringify(res))
        })
    }else {
        console.log('用户未登录')
        setUserInfo('')
    }
}

5. 获取数据

        acb.vue

<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'

const userInfo = useUserStore()
const { info } = storeToRefs(userInfo)

console.log(info.value?.id)

</script>

<template>

    <div>
            {{info?.id}}
    </div>

</template>