Vuex Support
The stored browser values (localStorage, cookie, etc.) changes can be synced with Vuex state. For example:
import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import VueWarehouseSync from 'vue-warehouse/sync'
import VuexStore from './Vuex/store' // Vuex store instance
import VueWarehouseStore from 'store' // vue-warehouse store instance
const unsync = VueWarehouseSync(VuexStore, VueWarehouseStore) // done. Returns an unsync callback function
Vue.use(VueWarehouse, {
store: VueWarehouseStore
})
// bootstrap your app...
// During app/Vue teardown (e.g., you only use Vue.js in a portion of your app and you
// navigate away from that portion and want to release/destroy Vue components/resources)
unsync() // Unsyncs store from VueWarehouse
You can optionally set a custom Vuex module name:
VueWarehouseSync(
VuexStore,
VueWarehouseStore,
{ moduleName: 'vuexTrunkOfMemories' }
)
How does it work?
-
It adds a
warehouse
module into the Vuex store, which contains the state representing the last change made to the browser store (localStorage, cookie, etc.):store.state.warehouse.action // action performed (set, remove, clearAll) store.state.warehouse.key // key affected store.state.warehouse.value // sent value store.state.warehouse.oldValue // last value before performing the action
-
When an action is performed with vue-warehouse, the Vuex store's state is updated.
-
store.state.warehouse
is immutable, because it is derived state from the changes sent to vue-warehouse, which is the source of truth. You should not attempt to update the browser store (localStorage, cookie, etc.) by mutating the warehouse object. Instead, just call$warehouse.set()
,$warehouse.get()
,$warehouse.remove()
or$warehouse.clearAll()
.