Vue3 中使用 vuex

Vue 3 和 Vue 2 中使用 Vuex 的方式总体上是相似的，但由于 Vue 3 引入了新的特性和 API，使用 Vuex 的方式也有一些区别：

特性	Vue 2	Vue 3
Vuex 版本	Vuex 3.x	Vuex 4.x
插件注册方式	Vue.use(Vuex)	app.use(store)
创建 Store 的方法	new Vuex.Store()	createStore()
访问 store 的方式	this.$store	useStore()
组合式 API 支持	不支持	支持
状态访问	this.$store.state	store.state（使用组合式 API）
提交 Mutation	this.$store.commit('mutation')	store.commit('mutation')（使用组合式 API）
TypeScript 支持	基本支持	更好的支持和类型推断

1. 版本和依赖

• Vue 2 使用 Vuex 3.x：与 Vue 2 兼容。
• Vue 3 使用 Vuex 4.x：为支持 Vue 3 的新特性而发布，提供了对组合式 API 的支持和更好的 TypeScript 集成。

2. 创建和使用 Vuex Store

Vue 2 中的 Vuex 使用

在 Vue 2 中，Vuex 的使用方法如下：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex); // 注册 Vuex 插件

// 创建 Vuex Store 实例
export default new Vuex.Store({
  state: {
    count: 0 // 定义状态
  },
  mutations: {
    // 定义一个 mutation，用于改变状态
    increment(state) {
      state.count++; // 递增 count
    }
  },
  actions: {
    // 定义一个 action，用于提交 mutation
    increment(context) {
      context.commit('increment');
    }
  }
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 导入 Vuex Store

new Vue({
  store, // 将 store 挂载到 Vue 实例
  render: h => h(App)
}).$mount('#app'); // 挂载到 DOM

Vue 3 中的 Vuex 使用

在 Vue 3 中，Vuex 4.x 提供了更现代化的 API，使用方法如下：

// store/index.js
import { createStore } from 'vuex';

// 创建 Vuex Store 实例
export default createStore({
  state() {
    return {
      count: 0 // 定义状态
    };
  },
  mutations: {
    // 定义一个 mutation，用于改变状态
    increment(state) {
      state.count++; // 递增 count
    }
  },
  actions: {
    // 定义一个 action，用于提交 mutation
    increment(context) {
      context.commit('increment');
    }
  }
});

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 导入 Vuex Store

createApp(App)
  .use(store) // 使用 Vuex 插件
  .mount('#app'); // 挂载到 DOM

3. 插件使用

• Vue 2：使用 Vue.use(Vuex) 注册 Vuex 插件。
• Vue 3：使用 app.use(store) 注册 Vuex 插件，符合 Vue 3 的新插件系统。

4. 组合式 API 支持

Vue 3 中的组合式 API (Composition API) 可以更好地与 Vuex 结合使用。我们可以在 setup 函数中使用 useStore 钩子来访问 store。

// 使用组合式 API 访问 Vuex Store
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore(); // 获取 Vuex Store 实例

    // 创建计算属性，用于获取 state
    const count = computed(() => store.state.count);

    // 定义方法，用于提交 mutation
    const increment = () => {
      store.commit('increment'); // 提交 increment mutation
    };

    return {
      count, // 返回计算属性
      increment // 返回方法
    };
  }
};

5. 状态访问与修改

在 Vue 2 和 Vue 3 中，访问和修改状态的方式基本相同，但 Vue 3 提供了更灵活的组合式 API 支持。

状态访问

// Vue 2 方式
this.$store.state.count;

// Vue 3 方式
const store = useStore();
store.state.count;

提交 Mutation

// Vue 2 方式
this.$store.commit('increment');

// Vue 3 方式
const store = useStore();
store.commit('increment');

6. 使用 TypeScript

Vue 3 和 Vuex 4.x 提供了更好的 TypeScript 支持，使得在开发大型项目时更容易定义和使用强类型的 Vuex 模块。

总结

• Vue 3 提供了对组合式 API 的支持：使得 Vuex 与组合式 API 可以更好地结合，代码更加现代化和灵活。
• 注册插件和创建 Store 的方法有所变化：主要是因为 Vue 3 的插件系统变化所致。
• 更好的 TypeScript 支持：Vuex 4.x 更好地支持 TypeScript，使得开发过程更加顺畅。