還在用vuex?來(lái)了解一下pinia

更新時(shí)間：2022年02月10日 15:41:21 作者：別欺負(fù)我一個(gè)剛畢業(yè)的，前端老同志

這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

1. 什么是pinia

通俗的講：

① vuex精簡(jiǎn)版，而且vue官方更加推薦使用。

②優(yōu)勢(shì)又完勝于vuex ，下面我們來(lái)了解下pinia。

2.優(yōu)勢(shì)

pina	vuex
pinia 同時(shí)支持vue2和vue3	vue2要用vuex 3 版本 vue3要用vuex 4 版本
不分同步異步，更好的ts支持	分同步異步，不太兼容ts
享受自動(dòng)補(bǔ)全 …	需要注入，導(dǎo)入函數(shù)，調(diào)用他們 …

3. 使用（非常簡(jiǎn)單）

① 安裝

npm install pinia

②在 main.js 中加入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'  //導(dǎo)入pinia
const  pinia = createPinia();        //調(diào)用創(chuàng)建pinia
createApp(App)
			.use(pinia)
			.mount('#app')

③去創(chuàng)建 pinia 倉(cāng)庫(kù)

一般選在 /src下的 store 文件夾下例：創(chuàng)建為 pinia.js

/src/store/pinia.js 為：

import { defineStore } from 'pinia'
export const PiniaStore = defineStore('main',{  //導(dǎo)出 pinia倉(cāng)庫(kù)
    state:() => { //相當(dāng)于全局的 data()
        return {
            name:'張三',
            age:18
        }
    },
    getters:{},  //相當(dāng)于全局的computed
    actions:{}   //相當(dāng)于全局methods
})

③使用（非常容易）

以/src/view/index.vue 為例：

Vue3寫(xiě)法：

<template>
    <h3>{{pinia.name}}</h3>  <!--使用-->
    <h3>{{pinia.age}}</h3>
    <button @click="pinia.age++">修改pinia數(shù)據(jù)</button>   <!--修改-->
</template>
<script setup>
    import { PiniaStore } from '../../store/pinia'
    const pinia = PiniaStore();
</script>

Vue2寫(xiě)法：

<template>
	<div>
       <h3>{{pinia.name}}</h3>
       <h3>{{pinia.age}}</h3>
       <button @click="pinia.age++">修改pinia數(shù)據(jù)</button>
    </div>
</template>
<script>
    import { PiniaStore } from '../../store/pinia'
    export default {
			created(){const pinia = PiniaStore();}
	}
</script>

大家不用擔(dān)心用pinia會(huì)出問(wèn)題，官方已經(jīng)明確說(shuō)了pinia是vuex 5版本的理念，而且官方更推薦pinia而非vuex