vue3+Ts使用pinia方式(vue-lic搭建項(xiàng)目)
更新時(shí)間：2025年01月24日 09:31:04 作者：益達(dá)木咸醇
文章介紹了如何在Vue 3項(xiàng)目中使用Pinia進(jìn)行狀態(tài)管理,主要內(nèi)容包括安裝Pinia、初始化、在main.ts中注冊和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結(jié)部分表達(dá)了作者希望得到大家支持的意愿
vue3+Ts使用pinia(vue-lic搭建項(xiàng)目)
1、安裝
npm install pinia -S
2、pinia初始化
//在store目錄下新建多個.ts文件（為了便于模塊化和更好維護(hù)）
//index.ts
import { manage } from './backstageMange';
export { manage };
//manage.ts
import { defineStore } from 'pinia';
export const manage = defineStore('manageStore',{
state: () => {
//狀態(tài)
return {
person: {
name: 'pinia',
age: 0,
say: 'woc'
},
reason: '我愛前端',
}
},
getters: {
//計(jì)算屬性
},
actions: {
//異步操作
},
});3、在main.ts中注冊使用
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app');4、在.vue的setup中使用
這里我只展示state的使用，getters和actions的使用請轉(zhuǎn)彎到官方網(wǎng)址查閱。
<script lang="ts">
import { defineComponent } from 'vue';
import { manage } from '@/store';
export default defineComponent({
setup() {
const store = manage();
...
//store.person就可以拿到person這個對象
//也可以直接把store直接return出去在template中使用
//更改store狀態(tài)
//第一種方式，更靈活可以做一些其他的邏輯
store.$patch((state: any) => {
...
state.person['name'] = '益達(dá)';
});
//第二種方式,只能直接更改某個狀態(tài)
store.$patch({
reason: '我更愛前端了！', //這里也可以寫一個表達(dá)式，比如前面有一個變量賦值給reason，hobby ? hobby : '我更愛前端了！'
})
}
})
</script>5、在ts文件中使用狀態(tài)
import { manage } from '../store';
export function updateAside() {
const store = manage();
....
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于element中對el-input 自定義驗(yàn)證規(guī)則
這篇文章主要介紹了關(guān)于element中對el-input 自定義驗(yàn)證規(guī)則，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
詳解如何在Vue2中實(shí)現(xiàn)useDraggable
這篇文章主要為大家詳細(xì)介紹了Vue2中實(shí)現(xiàn)useDraggable的相關(guān)知識,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能
這篇文章主要介紹了vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue v-on:click傳遞動態(tài)參數(shù)的步驟
這篇文章主要介紹了vue v-on:click傳遞動態(tài)參數(shù)的步驟，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue項(xiàng)目打包后打開空白解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06