vue3使用vuex的示例(模块化功能)

目录

1. store/index.ts

2. main.ts

3. App.vue调用

4. 如果删除moduleA的namespaced属性, 保留moduleB的namespaced:true

5. 则App.vue修改为:

---

1. store/index.ts

注意: 需要使用时带上模块名称的namespaced必须为true, 不写或者为false时调用时不需要写模块名称(获取state的值必须加模块名)

import { createStore } from "vuex";
// A模块
const moduleA = {namespaced: true,state: {name: "moduleA",},getters: {newName(state) {return state.name;},},mutations: {changeName(state, payload) {state.name = payload;},updateAge(state, playLoad) {state.age = playLoad;},},actions: {changeAge({ commit }, age) {setTimeout(() => {commit("updateAge", age);}, 0);},},
};
// B模块
const moduleB = {namespaced: true,state: {name: "moduleB",age: 33,},getters: {newName(state) {return state.name;},},mutations: {changeName(state, payload) {state.name = payload;},updateAge(state, playLoad) {console.log("playLoad", playLoad);state.age = playLoad;},},actions: {changeAge(ctx, count) {console.log("触发了-模块B的action");setTimeout(() => {ctx.commit("updateAge", count);}, 1000);},},
};
export default createStore({// 分模块modules: {moduleA,moduleB,},
});

2. main.ts

import { createApp } from "vue";
import App from "./App.vue";
import * as Vue from "vue";
import store from './store';const app = createApp(App);
app.use(store);
app.mount("#app");

3. App.vue调用

<template><div id="container"><!-- 1、使用A模块的state数据 --><div>姓名: <input type="text" @change="changeAName($event)"></div><div>年龄: <input type="number" @change="changeAAge($event)"></div><h1>模块a:</h1><p>姓名(state): {{ store.state.moduleA.name }}</p><!-- 2、使用A模块的getters数据 --><p>姓名(getters): {{ store.getters["moduleA/newName"] }}</p><p>年龄: {{ store.state.moduleA.age }}</p><!-- 1、使用B模块的state数据 --><h1>模块b:</h1><div>姓名: <input type="text" @change="changeBName($event)"></div><div>年龄: <input type="number" @change="changeBAge($event)"></div><p>姓名(state): {{ store.state.moduleB.name }}</p><!-- 2、使用B模块的getters数据 $store.getters['模块名/计算属性']--><p>姓名(getters): {{ store.getters["moduleB/newName"] }}</p><p>年龄: {{ store.state.moduleB.age }}</p></div>
</template>
<script setup lang="ts">
import { useStore } from "vuex";// userStore可以拿到vuex仓库实例
const store = useStore();const changeAName = (e) => {store.commit('moduleA/changeName', e.target.value)
};
const changeAAge = (e) => {store.dispatch("moduleA/changeAge", e.target.value)
};const changeBName = (e) => {// 提交B模块的更改store.commit('moduleB/changeName', e.target.value)
};
const changeBAge = (e) => {// 传参用法store.dispatch("moduleB/changeAge", e.target.value)
};
</script>
<style lang='scss' scoped></style>

4. 如果删除moduleA的namespaced属性, 保留moduleB的namespaced:true

import { createStore } from "vuex";
// A模块
const moduleA = {state: {name: "moduleA",},getters: {newName(state) {return state.name;},},mutations: {changeName(state, payload) {state.name = payload;},updateAge(state, playLoad) {state.age = playLoad;},},actions: {changeAge({ commit }, age) {setTimeout(() => {commit("updateAge", age);}, 0);},},
};
// B模块
const moduleB = {namespaced: true,state: {name: "moduleB",age: 33,},getters: {newName(state) {return state.name;},},mutations: {// 更改数据函数changeName(state, payload) {state.name = payload;},updateAge(state, playLoad) {console.log("playLoad", playLoad);state.age = playLoad;},},actions: {changeAge(ctx, count) {setTimeout(() => {ctx.commit("updateAge", count);}, 1000);},},
};
export default createStore({// 分模块modules: {moduleA,moduleB,},
});

5. 则App.vue修改为:

<template><div id="container"><!-- 1、使用A模块的state数据 --><div>姓名: <input type="text" @change="changeAName($event)"></div><div>年龄: <input type="number" @change="changeAAge($event)"></div><h1>模块a:</h1><p>姓名(state): {{ store.state.moduleA.name }}</p><p>姓名(getters): {{ store.getters["newName"] }}</p><p>年龄: {{ store.state.moduleA.age }}</p><!-- 1、使用B模块的state数据 --><h1>模块b:</h1><div>姓名: <input type="text" @change="changeBName($event)"></div><div>年龄: <input type="number" @change="changeBAge($event)"></div><p>姓名(state): {{ store.state.moduleB.name }}</p><!-- 2、使用B模块的getters数据 $store.getters['模块名/计算属性']--><p>姓名(getters): {{ store.getters["moduleB/newName"] }}</p><p>年龄: {{ store.state.moduleB.age }}</p></div>
</template>
<script setup lang="ts">
import { useStore } from "vuex";// userStore可以拿到vuex仓库实例
const store = useStore();const changeAName = (e) => {store.commit('changeName', e.target.value)
};
const changeAAge = (e) => {store.dispatch("changeAge", e.target.value)
};const changeBName = (e) => {store.commit('moduleB/changeName', e.target.value)
};
const changeBAge = (e) => {store.dispatch("moduleB/changeAge", e.target.value)
};
</script>
<style lang='scss' scoped></style>