Vuex插件精解

2024-02-07 23:01:11

一、官方文档

官方文档对于Vuex插件的介绍主要分为两个部分：

第一步

首先，我们需要创建一个新的Vuex模块。这个模块将包含我们的插件逻辑。

const myPlugin = {
  install: (Vue, options) => {
    // 这里是我们插件的逻辑
  }
}

Vue.use(myPlugin)

第二步

现在，我们可以使用我们的插件了。我们可以在任何组件中通过this.$store.getters.myGetter来访问我们的插件。

this.$store.getters.myGetter

二、编写一个打印日志的插件

为了更好地理解Vuex插件的编写和使用，我们首先编写一个简单的日志插件。这个插件将记录所有Vuex的mutation，并在控制台中打印出来。

1、函数的书写

const logger = {
  install: (Vue, options) => {
    Vue.mixin({
      beforeCreate() {
        // 在组件创建之前执行
        const store = this.$store
        store.subscribe((mutation, state) => {
          // 在每次mutation之后执行
          console.log(mutation)
        })
      }
    })
  }
}

2、使用

在main.js文件中，我们通过Vue.use()方法安装这个插件。

import Vue from 'vue'
import Vuex from 'vuex'
import logger from './logger'

Vue.use(Vuex)
Vue.use(logger)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
})

new Vue({
  store
}).$mount('#app')

现在，每次我们在Vuex中触发mutation，控制台中都会打印出相应的日志。

三、vuex数据持久化

Vuex数据持久化是指将Vuex中的数据存储到本地存储或其他持久化存储介质中，以便在页面刷新或关闭后仍能保留这些数据。这对于需要保存用户登录状态、购物车数据等信息非常有用。

1、函数的书写

const vuexPersistence = {
  install: (Vue, options) => {
    const storage = options.storage || window.localStorage
    Vue.mixin({
      beforeCreate() {
        const store = this.$store
        store.subscribe((mutation, state) => {
          storage.setItem('vuex', JSON.stringify(state))
        })
      },
      created() {
        const state = JSON.parse(storage.getItem('vuex'))
        if (state) {
          this.$store.replaceState(state)
        }
      }
    })
  }
}

2、使用

import Vue from 'vue'
import Vuex from 'vuex'
import vuexPersistence from './vuexPersistence'

Vue.use(Vuex)
Vue.use(vuexPersistence, { storage: window.localStorage })

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
})

new Vue({
  store
}).$mount('#app')