Vue3 setup script+Typescript实战用法（三）——store++内部运作浅析
2024-02-04 16:11:54
创建 Vuex Store
在 Vue.js 应用中，Vuex 被广泛用于集中管理组件状态。对于使用 TypeScript 的开发环境，正确地设置和类型化 store 是关键步骤之一。
定义 State 类型
首先，定义一个接口来描述 state 中的数据结构：
interface State {
count: number;
}
然后，在创建 store 时应用这个接口。Vuex 提供了 Store 接口，并允许传入状态类型以增强类型安全。
创建 Store
下面展示如何使用 Vuex 和 TypeScript 来创建一个简单的 store。
安装依赖
首先需要安装必要的 npm 包：
npm install vuex @types/vuex --save
配置 Store
接着，在应用中配置 store。以下是一个基本的 store 设置例子：
import { createStore } from 'vuex';
const store = createStore<State>({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
}
}
});
export default store;
连接 Store 到应用
在 Vue 应用中，通过创建 main.ts 文件来连接 store：
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
使用 Getters
Vuex 的 getters 提供了一种读取状态数据的方式，可以将 getter 看作是状态的计算属性。
定义 Getter
定义一个 getters 对象来映射状态到函数：
const store = createStore<State>({
state: {
count: 0,
},
getters: {
doubleCount(state) {
return state.count * 2;
}
},
mutations: { ... }
});
在组件中使用 Getter
在 Vue 组件中，可以通过 this.$store.getters 访问 getter：
<template>
<p>{{ doubleCount }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
computed: {
doubleCount() {
return this.$store.getters.doubleCount;
}
}
});
</script>
使用 Mutations
mutations 是更改 Vuex store 中状态的唯一方法，并且必须同步执行。
定义 Mutation
在定义 mutation 函数时，确保每个函数都接收 state 参数：
const store = createStore<State>({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
}
}
});
调用 Mutation
在组件中调用 mutation，使用 this.$store.commit('mutationName')：
<template>
<button @click="increment">Increment</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
increment() {
this.$store.commit('increment');
}
}
});
</script>
通过上述步骤，开发人员能够更好地理解和利用 Vuex 的工作机制。注意，对于复杂的应用场景，还需要考虑 actions 和 modules 的使用，以增强应用的结构和可维护性。
总结
本文深入讨论了如何在 Vue3 环境中与 TypeScript 一起使用 Vuex store。通过创建 store、定义 state 类型、设置 getter 及 mutation，并将这些元素连接到组件上，能够构建出状态管理清晰且类型安全的应用程序。在实际开发过程中，建议根据具体需求调整代码结构和组织方式，以提高可读性和维护性。
