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目錄下新建多個(gè).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這個(gè)對象
//也可以直接把store直接return出去在template中使用
//更改store狀態(tài)
//第一種方式，更靈活可以做一些其他的邏輯
store.$patch((state: any) => {
...
state.person['name'] = '益達(dá)';
});
//第二種方式,只能直接更改某個(gè)狀態(tài)
store.$patch({
reason: '我更愛前端了！', //這里也可以寫一個(gè)表達(dá)式，比如前面有一個(gè)變量賦值給reason，hobby ? hobby : '我更愛前端了！'
})
}
})
</script>5、在ts文件中使用狀態(tài)
import { manage } from '../store';
export function updateAside() {
const store = manage();
....
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何解決element-ui中多個(gè)table在tab切換時(shí)出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個(gè)table在tab切換時(shí)出現(xiàn)寬度縮小問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)
這篇文章主要介紹了Vue.js系列之項(xiàng)目結(jié)構(gòu)說明(2)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)
這篇文章主要介紹了Vue路由的模塊自動(dòng)化與統(tǒng)一加載實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實(shí)現(xiàn))
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實(shí)現(xiàn),也可以通過前后端配合實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實(shí)現(xiàn),需要的朋友可以參考下2024-04-04
在使用vue腳手架搭建前端工程時(shí),經(jīng)常會(huì)遇到打包上線后的緩存問題,許多開發(fā)者會(huì)直接在index.html中加入類似以下代碼來解決緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了一款不用跑項(xiàng)目的vscode組件所見即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Vite+Vue3使用MockJS的實(shí)現(xiàn)示例
寫一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡單的數(shù)據(jù),來滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-01-01