vue開發(fā)中如何在js文件里使用pinia和組件同步
更新時(shí)間：2024年10月17日 09:59:41 作者：從來(lái)風(fēng)花雪月無(wú)常
在JavaScript文件中封裝涉及到使用Pinia的方法時(shí),發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨(dú)立的,解決辦法是,在新建對(duì)象的時(shí)候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧
遇到問(wèn)題
在js文件中封裝涉及到使用pinia的方法時(shí)，發(fā)現(xiàn)和組件內(nèi)容并不同步，二者是互相獨(dú)立的。為了方便使用，需要在新建對(duì)象的時(shí)候，將pinia作為參數(shù)傳進(jìn)去
只需要傳pinia參數(shù)就可以
store/index.js
import { defineStore } from "pinia";
import { createPinia } from 'pinia'
export const pinia = createPinia();
export const StoreData = defineStore('storeData',{
state:()=>(
{
carList:[],
carsMessage:{}
}
)
})main.js
import { pinia } from './store/';
import App from './App.vue';
const app = createApp(App);
app.use(pinia);
app.mount('#app');js腳本文件使用
import { StoreData,pinia } from "@/store";
const storeData = new StoreData(pinia);// 必須傳參數(shù) pinia這樣就可以了，如果沒(méi)有new StoreData(pinia)傳參數(shù)，是不會(huì)改變的
到此這篇關(guān)于vue開發(fā)中，在js文件里使用pinia和組件同步的文章就介紹到這了,更多相關(guān)vue 使用pinia和組件同步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+axios+promise實(shí)際開發(fā)用法詳解
這篇文章主要介紹了vue+axios+promise實(shí)際開發(fā)用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用npm報(bào)了很多錯(cuò),做的事情就是把錯(cuò)誤復(fù)制到百度上去搜索,看看哪個(gè)解決方案有效,下面這篇文章主要給大家介紹了關(guān)于npm打包失敗排查的全過(guò)程,需要的朋友可以參考下2022-11-11
Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過(guò)濾器功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
在本篇文章里小編給大家分享了關(guān)于vue組件中使用路由的詳細(xì)步驟內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說(shuō)在vue3中$listeners不存在了，vue2中$listeners是單獨(dú)存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue組件父與子通信詳解，實(shí)現(xiàn)登錄窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載
這篇文章主要為大家詳細(xì)介紹了vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁(yè)面
這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁(yè)面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)詳解
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12