详解Vue3-pinia状态管理_vue.js_

pinia是什么？

这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

官网

https://pinia.vuejs.org/

安装命令

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 中存储的状态

到此这篇关于Vue3-pinia状态管理的文章就介绍到这了,更多相关Vue3-pinia状态管理内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！