pinia是什么?
这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 mutations 但是也是支持 vue2 的,尤大推荐。因为其logo像是一个菠萝,所以我们还称呼它为大菠萝。
这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐。因为其logo像是一个菠萝,所以我们还称呼它为大菠萝。
安装命令
npm i pinia
使用
1、mian.js 中引入 pinia,全局注册
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app') 2、store文件夹新建 index.js 文件,支持TS的你就建立 index.ts,文件中引入 pinia 使用,用来存储状态
import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
state() {
return {
name: '景天',
age: 18,
name1: '胡歌',
age1: 36
}
},
// 和vuex一样
getters: {
},
// 和vuex一样
actions: {
setAge() {
this.age--
}
}
})3、页面中使用 pinia 中存储的状态
立即学习“前端免费学习笔记(深入)”;
正常取值
{{User.name}}
{{User.age}}
解构取值
{{name}}
{{age}}
解构取值转ref
{{name1}}
{{age1}}










