Vuex的熱更替如何實(shí)現(xiàn)
前言
我們?cè)谑褂肰uex的時(shí)候,會(huì)時(shí)不時(shí)的更改Vuex內(nèi)的數(shù)據(jù),但是頁(yè)面不會(huì)隨之更新,如果數(shù)據(jù)量大,一個(gè)數(shù)據(jù)依賴另一個(gè)數(shù)據(jù)的話,這樣我們要是再刷新頁(yè)面的話會(huì)把以前依賴的數(shù)據(jù)清空,效率特別低。所以,今天我總結(jié)了怎么實(shí)現(xiàn)Vuex熱更替的功能。
實(shí)現(xiàn)
首先,我們這里使用了Vue CLI3。在根目錄下的src目錄下我們有一個(gè)存放Vuex的文件夾叫做store文件夾。首先我們分割成幾個(gè)模塊。
下面我們把它們分別引入,這里沒有分割actions,不過與其他屬性同理,這里有不做介紹。下面我們?cè)趇ndex.js編輯下面代碼:
import Vuex from 'vuex' // 引入分割的模塊 import state from './state/state' import mutations from './mutations/mutations' import getters from './getters/getters' export default ()=>{ // 這里需要賦給一個(gè)store變量 const store = new Vuex.Store({ state:state, mutations:mutations, getters:getters }) // 熱更新模塊 if(module.hot){ // 跟上面一樣,寫入對(duì)應(yīng)的分割模塊路徑 module.hot.accept([ './state/state', './mutations/mutations', './getters/getters' ],()=>{ // 開啟熱更替 const newState = require('./state/state').default const newMutations = require('./mutations/mutations').default const newGetters = require('./getters/getters').default store.hotUpdate({ state:newState, mutations:newMutations, getters:newGetters }) }) } return store }
我們還需要在main.js修改:
import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' import createStore from './store/index.js' Vue.config.productionTip = false Vue.use(Vuex) const store=createStore(); new Vue({ store, render: h => h(App) }).$mount('#app')
一些其他api
// store.registerModule({ //動(dòng)態(tài)添加模塊 // }) // 相當(dāng)于getter // store.watch((state)=>state.count+1,(newCount)=>{ // console.log('new count watched , '+newCount) // }) // mutation被調(diào)用時(shí) // store.subscribe((mutation,state)=>{ // console.log(mutation.type) // console.log(mutation.payload) // }) // action被調(diào)用時(shí) // store.subscribeAction((action,state)=>{ // console.log(action.type) // console.log(action.payload) // })
結(jié)語(yǔ)
以上就完成了Vuex的熱更替功能。需要注意的是,直接在state中更改是看不到效果的哦!
到此這篇關(guān)于Vuex的熱更替如何實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vuex 熱更替內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vuex實(shí)現(xiàn)購(gòu)物車小功能
- vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
- Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例
- vuex管理狀態(tài)倉(cāng)庫(kù)使用詳解
- 解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作
- vuex中store存儲(chǔ)store.commit和store.dispatch的用法
- 解決VUEX的mapState/...mapState等取值問題
- 對(duì)vuex中store和$store的區(qū)別說明
- 淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法
- 如何手寫一個(gè)簡(jiǎn)易的 Vuex
相關(guān)文章
強(qiáng)烈推薦!Vue3.2中的setup語(yǔ)法糖
script?setup是vue3的新語(yǔ)法糖,并不是新增的功能模塊,只是簡(jiǎn)化了以往的組合式API必須返回(return)的寫法,并且有更好的運(yùn)行時(shí)性能,這篇文章主要給大家介紹了關(guān)于Vue3.2中setup語(yǔ)法糖的相關(guān)資料,需要的朋友可以參考下2021-12-12vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單,其中核心代碼在于disabled,代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解
這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11