还在用vuex?来了解一下pinia
作者：别欺负我一个刚毕业的，前端老同志
这篇文章主要为大家详细介绍了pinia，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
1. 什么是pinia
通俗的讲 ：
① vuex精简版 ，而且vue官方更加推荐使用。
②优势又完胜于vuex ，下面我们来了解下pinia。
2.优势
| pina | vuex |
|---|---|
| pinia 同时支持vue2和vue3 | vue2要用vuex 3 版本 vue3要用vuex 4 版本 |
| 不分同步异步，更好的ts支持 | 分同步异步，不太兼容ts |
| 享受自动补全 … | 需要注入，导入函数，调用他们 … |
3. 使用 （非常简单）
① 安装
npm install pinia
②在 main.js 中 加入
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' //导入pinia
const pinia = createPinia(); //调用创建pinia
createApp(App)
.use(pinia)
.mount('#app')
③去创建 pinia 仓库
一般选在 /src下的 store 文件夹下 例：创建为 pinia.js
/src/store/pinia.js 为：
import { defineStore } from 'pinia'
export const PiniaStore = defineStore('main',{ //导出 pinia仓库
state:() => { //相当于全局的 data()
return {
name:'张三',
age:18
}
},
getters:{}, //相当于全局的computed
actions:{} //相当于全局methods
})
③使用 （非常容易）
以/src/view/index.vue 为例：
Vue3写法：
<template>
<h3>{{pinia.name}}</h3> <!--使用-->
<h3>{{pinia.age}}</h3>
<button @click="pinia.age++">修改pinia数据</button> <!--修改-->
</template>
<script setup>
import { PiniaStore } from '../../store/pinia'
const pinia = PiniaStore();
</script>
Vue2写法：
<template>
<div>
<h3>{{pinia.name}}</h3>
<h3>{{pinia.age}}</h3>
<button @click="pinia.age++">修改pinia数据</button>
</div>
</template>
<script>
import { PiniaStore } from '../../store/pinia'
export default {
created(){const pinia = PiniaStore();}
}
</script>
大家不用担心用pinia会出问题 ，官方已经明确说了pinia是vuex 5版本的理念，而且官方更推荐pinia而非vuex
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!