还在用vuex?来了解一下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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!   

您可能感兴趣的文章:

  • Vue生态的新成员Pinia的详细介绍
  • Vue新一代状态管理工具Pinia的具体使用
  • Vue状态管理之使用Pinia代替Vuex
  • vuex5中的Pinia插件机制
页面下部广告
分类: