Vue3学习日志（3）：Pinia的配置和使用

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。 

Pinia官网：Pinia值得你喜欢的 Vue Storehttps://pinia.vuejs.org/zh/getting-started.html

目录

1.配置Pinia

2.在页面中使用Pinia

---

1.配置Pinia

安装完成后创建Pinia.ts来写使用的方法，并在main.ts中引入。

//mian.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import { createPinia } from 'pinia'

const pinia = createPinia()
const app=createApp(App);
app.use(router).use(pinia).mount('#app')

也可以直接在Pinia中引入。

//pinia.ts
import { createPinia, defineStore } from 'pinia'
import type { App } from 'vue'

export const store = createPinia()

export default function (app: App) {
  app.use(store)
}

创建要存放的变量名称和调用这些参数的方法

//pinia.ts
export const useStore = defineStore('storeId', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {//在此处写要存放的变量的名称
    return {
        // 所有这些属性都将自动推断其类型
        username: "",
        menu: "",
        token: "",
        menuRouter: [],
        model_path:"",
        iconid:"",
    }
},

actions: { //在此处写操作变量的方法
    setUsername(username) { //存储username的方法
        this.username = username;
    },
    setmenu(menu) {//存储Menu数组的方法
        this.menu = menu;
    },
    setScore(score,model_path) {
        this.score = score;
        this.model_path = model_path;
    },
}
})

state中所有这些属性都将自动推断其类型。

2.在页面中使用Pinia

//login.ts
<script setup lang="ts">
  import { useStore } from '@/plugins/pinia'
  const store = useStore()

  //从后台接收的用户数据
  const res = await getlogin({ message: { username: form.value.username, password: 
  form.value.password }, func: 'login' })

  //把数据中的username存储起来
  if(res.data.status=="ok"){
    store.setUsername(res.data.username)
    console.log(store.username)
  }

</script>

Pinia中的变量都可以直接调用，比如const username = store.username，修改变量的值需要在Pinia中自己定义方法，再调用这个方法来修改。