【vue2/3+實戰(zhàn)項目】vuex的modules和持久化存儲
2023-06-16 15:14 作者:真的不要再上網(wǎng)課了 | 我要投稿

vuex的modules和持久化存儲

數(shù)據(jù)可統(tǒng)一寫進store->index.js中的state中,也可把整個狀態(tài)管理細化一下,在store->新建一個modules文件夾,
里面添加分類的.js文件

然后在store->index.js中暴露出來:

看一眼html文件:

網(wǎng)頁效果:

方法使用如下圖展示:先在.js中mutations中定義

然后暴露(注意暴露時不能寫成對象的形式,要寫成數(shù)組)

modules總結(jié):
- 把整個狀態(tài)管理再次細分
-----------------------------------------------------
vuex的持久化存儲引入:
當某一個組件使用了vuex的數(shù)據(jù),比如把1修改成了2,刷新頁面又到了1該怎么辦?



顯然點擊按鈕數(shù)字加1,但頁面刷新后數(shù)字又變?yōu)?。
**注意:Vuex是一個集中式的狀態(tài)管理工具,本身不是持久化存儲,如果要實現(xiàn)持久化存儲可以:
- 自己寫localStorage
- 使用插件
方法一:localStorage

方法二:使用插件
1、下載安裝插件

npm install --save vuex-persistedstate -S(下載后要重啟項目;)
2、在store=>index.js中配置

3、使用

標簽: