Vue 状态管理策略：从单一状态树到分布式状态管理

1. Vuex：单一状态树

Vuex 是 Vue 官方推荐的状态管理库，它采用单一状态树的模式，将所有状态集中管理在一个对象中。这使得状态更容易追踪和修改，提高了代码的可维护性。

// store.js
import Vuex from "vuex"
import Vue from "vue"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex"

export default {
  computed: {
    ...mapState(["count"])
  },
  methods: {
    ...mapMutations(["increment"])
  }
}
</script>

2. Pinia：分布式状态管理

Pinia 是一个轻量级的 Vue 状态管理库，它采用分布式状态管理的模式，将状态分散到不同的模块中。这使得状态更易于组织和复用，也提高了代码的可扩展性。

// store.js
import { createPinia } from "pinia"

const pinia = createPinia()

export default pinia

// counter.js
import { defineStore } from "pinia"

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment () {
      this.count++
    }
  }
})

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { useCounterStore } from "./counter"

export default {
  setup () {
    const store = useCounterStore()

    return {
      count: store.count,
      doubleCount: store.doubleCount,
      increment: store.increment
    }
  }
}
</script>

3. 状态共享与隔离

在 Vue 应用中，状态共享和隔离是两个重要的概念。状态共享是指在不同的组件之间共享状态，而状态隔离是指在不同的组件之间隔离状态。

状态共享可以通过 Vuex 或 Pinia 来实现，而状态隔离可以通过使用不同的组件实例或使用状态管理库中的命名空间来实现。

// App.vue
<template>
  <div>
    <component-a></component-a>
    <component-b></component-b>
  </div>
</template>

<script>
import ComponentA from "./ComponentA.vue"
import ComponentB from "./ComponentB.vue"

export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

// ComponentA.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex"

export default {
  computed: {
    ...mapState(["count"])
  },
  methods: {
    ...mapMutations(["increment"])
  }
}
</script>

// ComponentB.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex"

export default {
  computed: {
    ...mapState(["count"])
  },
  methods: {
    ...mapMutations(["increment"])
  }
}
</script>

在上面的示例中，ComponentA 和 ComponentB 都共享了 Vuex 的状态。如果需要将状态隔离，可以为每个组件使用不同的 Vuex 模块或使用不同的组件实例。

4. 状态持久化

状态持久化是指将状态保存到本地存储或远程服务器，以便在页面刷新或浏览器关闭后仍能恢复状态。

状态持久化可以通过 Vuex 或 Pinia 来实现，也可以通过使用第三方库来实现。

// store.js
import Vuex from "vuex"
import Vue from "vue"
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  plugins: [createPersistedState()]
})

export default store

在上面的示例中，使用了 vuex-persistedstate 插件来实现状态持久化。该插件会将 Vuex 的状态自动保存到本地存储。

5. 总结

Vue 状态管理策略不断演进，从单一状态树到分布式状态管理，满足不同应用场景需求。本文介绍了 Vuex、Pinia、状态共享与隔离、状态持久化等策略，并提供了代码示例。