mpvue中配置vuex并持久化到本地Storage圖文教程解析
# 配置vuex和在vue中相同，只是mpvue有一個(gè)坑，就是不能直接在new Vue的時(shí)候傳入store。
步驟：
1.在src目錄下新建一個(gè)store目錄，結(jié)構(gòu)如下（官方推薦： vuex.vuejs.org/zh-cn/struc… ）
2. 在main.js中引入你的store, 并綁定到Vue構(gòu)造函數(shù)的原型上，這樣在每個(gè).vue的組件都可以通過(guò)this.$store訪問(wèn)store對(duì)象。
3. ok，可以使用了。我說(shuō)一下vuex官方推薦的使用方案（可適應(yīng)大型應(yīng)用）。
首先在mutation-types.js中定義你的Mutation的名字
為什么要先定義名稱常量？（下圖截取自vuex文檔）
然后在mutations.js中寫處理方法
接著在index.js中定義變量：
ok,下面在組件中使用
ok了。
# 將vuex中的數(shù)據(jù)持久化到本地 （使用vuex-persistedstate）（ github.com/robinvdvleu… ）
安裝插件后在store中引入（配置如下）：
ok 了（vuex中的數(shù)據(jù)已經(jīng)實(shí)時(shí)的同步到本地）。
（ tips: 提示，小程序每次進(jìn)入都會(huì)執(zhí)行removeItem方法，導(dǎo)致數(shù)據(jù)存儲(chǔ)不下來(lái)，所以暫時(shí)把上圖的removeItem后面的函數(shù)寫為一個(gè)空函數(shù)！！ ）
demo代碼 ： github.com/jianjian-we…
總結(jié)
以上所述是小編給大家介紹的mpvue中配置vuex并持久化到本地Storage圖文教程解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用webpack手動(dòng)搭建vue項(xiàng)目的步驟
這篇文章主要介紹了從零使用webpack手動(dòng)搭建vue項(xiàng)目的步驟，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決
這篇文章主要介紹了Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目中如何使用TypeScript相關(guān)配置
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過(guò)程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
這篇文章主要介紹了vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下2023-08-08
使用axios發(fā)送post請(qǐng)求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請(qǐng)求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無(wú)限滾動(dòng)功能
今天小編就為大家分享一篇vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無(wú)限滾動(dòng)功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫
過(guò)渡Vue在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2021-11-11