Vuex common plugins

1. State persistence

vuex-persistedstate uses the browser's local storage ( local storage ) to persist the state ( state ). This means that refreshing the page or closing the tab will not delete your data.

A good example is the shopping cart: if the user accidentally closes a tab, they can reopen it and go back to the previous page.

 

Save the number in the input box in vuex, but if the user refreshes, closes the tab, closes the browser, the saved state is reset to the initial value, using the persistence plugin, saves the data in local storage, even if Close your browser without losing data

Data has been saved to local storage

 

2. Sync tabs, windows

vuex-shared-mutations synchronize state between different tabs. It does this by mutationstoring state to local storage. The save event is triggered when the content in the tab and window is updated, and it is recalled mutationto keep the state in sync.

3. Language localization

vuex-i18n allows you to easily store content in multiple languages. Makes it easier for your app to switch languages.

A cool feature is that you can store strings with tokens, eg "Hello {name}, this is your Vue.js app.". All translated versions will use the same string in the marked place.

 

 

4. Manage multiple loading states

vuex-loading helps you manage multiple loading states in your application. This plugin is suitable for real-time applications with frequent and complex state changes.

5. Cache operation

vuex-cache can cache Vuex action. For example, if you retrieve data from the server, the plugin will cache the result the first actiontime , and then dispatchreturn the cached value directly on subsequent calls. It's also simple to clear the cache when necessary.

 

https://funteas.com/topic/5a1cd381827974186648cbae

 

Component code, using set and get of computed properties to simplify coding

<template>
  <div>
    <input type="number" v-model="num">
    {{
    num
    }}
  </div>
</template>

<script>
  export default {
    name: "vuex",
    computed: {
      num: {
        get() {
          console.log('get')
          return this.$store.state.num
        },
        set(data) {
          console.log('setter', data)
          this.$store.commit('save', data)
        }
      }
    }
  }
</script>

<style scoped>

</style>

store

import Vue from 'vue'
import createPersistedState from 'vuex-persistedstate'
import Vuex from 'vuex'
import createMutationsSharer from 'vuex-shared-mutations'

Vue.use(Vuex)

let state = {
  num: 1
}

let mutations = {
  save: (state, payload) => {
    state.num = payload
  }
}
const store = new Vuex.Store({
  state,
  mutations,
  // ...
  plugins: [
    createPersistedState(),
    createMutationsSharer({predicate: ['save',]})
  ]
})

export default store