還在用vuex?來瞭解一下pinia

Posted on by

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!   

推薦閱讀：