浅谈super-vuex使用体验

super-vuex是一款基于Vuex的状态管理插件，它可以简化Vuex的使用方式，提高提交和获取数据的效率。

安装

在使用super-vuex之前，需要先进行安装。可以通过npm或yarn来进行安装：

npm install super-vuex --save

或

yarn add super-vuex

快速开始

在使用super-vuex之前需要先将其引入到项目中：

import Vue from 'vue'
import SuperVuex from 'super-vuex'

Vue.use(SuperVuex)

然后我们就可以在Vue组件中使用this.$store来获取状态管理对象，无需像Vuex一样进行模块的定义和使用。

下面是一个示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  },
  computed: {
    count() {
      return this.$store.getters.count
    }
  }
}
</script>

从代码中可以看出，使用super-vuex无需像Vuex一样在store中定义increment操作和count状态，通过在组件中直接使用dispatch和getter来进行操作和获取。

示例1：使用插件管理状态

super-vuex还提供了一个插件集合（Plugins），可以通过在install方法中引入对应的插件来实现各种状态管理的功能。

比如，下面的示例中我们引入了super-vuex-persistedstate这个插件，使得我们的状态可以被持久化保存。

import Vue from 'vue'
import SuperVuex from 'super-vuex'
import persistedstate from 'super-vuex-persistedstate'

Vue.use(SuperVuex, {
  plugins: [persistedstate()]
})

实现效果：当应用刷新之后，状态仍然能够保持。

示例2：模块化管理状态

虽然super-vuex是一个基于Vuex的插件，但是它并不强制要求使用全局单一状态树。我们可以像使用Vuex一样进行模块化的状态管理。

比如，我们可以使用类似下面的代码来进行模块划分：

import Vue from 'vue'
import SuperVuex from 'super-vuex'

Vue.use(SuperVuex)

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
    decrement(context) {
      context.commit('decrement')
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  }
}

const store = new SuperVuex.Store({
  modules: {
    moduleA
  }
})

export default store

从代码中可以看出，我们将状态管理进行了模块划分，并将对应的模块进行了注册，可以像使用全局状态树一样使用模块中的状态、getter、mutation和action。