vuex modules 代码整理

demo/vuex-modules/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-link :to="{name:'options'}">OptionsAPI</router-link>
+    |
+    <router-link :to="{name:'composition'}">CompositionAPI</router-link>
+  </div>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script setup>
+
+</script>

demo/vuex-modules/main.js

@@ -0,0 +1,6 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+import router from './router'
+import store from './store'
+
+createApp(App).use(router).use(store).mount('#app')

demo/vuex-modules/router/index.js

@@ -0,0 +1,32 @@
+// 引入必要的router组件
+import {createRouter, createWebHistory} from 'vue-router'
+// 引入视图
+const OptionsAPI = () => import('../views/OptionsAPIView.vue')
+const CompositionAPI = () => import('../views/CompositionAPIView.vue')
+
+// 引入组件
+
+
+// 创建路由
+const routes = [
+    {
+        path: '/options',
+        name: 'options',
+        component: OptionsAPI
+    },
+    {
+        path: '/composition',
+        name: 'composition',
+        component: CompositionAPI
+    },
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router

demo/vuex-modules/store/index.js

@@ -0,0 +1,37 @@
+import {createStore} from "vuex";
+import {moduleA} from "@/store/modules/ModuleA";
+import {moduleB} from "@/store/modules/ModuleB";
+
+export default createStore({
+    modules: {
+        module_a: moduleA,
+        module_b: moduleB,
+    },
+    state: {
+        count: 3,
+    },
+    getters: {
+        // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
+        getter: (state) => (n) => {
+            return state.count * n;
+        },
+    },
+    mutations: {
+        // payload用于携带参数
+        mutation(state, payload) {
+            state.count += payload.num
+        }
+    },
+    actions: {
+        action(content, payload) {
+            // 模拟异步操作
+            setTimeout(() => {
+                // rep 模拟axios请求返回的数据
+                const rep = 3;
+                if (content.state.count > 50) {
+                    content.commit('mutation', {num: rep + payload.num});
+                }
+            }, 1000)
+        }
+    }
+})

demo/vuex-modules/store/modules/ModuleA.js

@@ -0,0 +1,22 @@
+export const moduleA = {
+    state: {
+        state_a: 1,
+    },
+    getters: {
+        getter_a: (state) => {
+            return state.state_a + 10;
+        }
+    },
+    mutations: {
+        mutation_a(state, payload) {
+            state.state_a += payload.num;
+        }
+    },
+    actions: {
+        action_a(content, payload) {
+            if (content.state.state_a > 50) {
+                content.commit('mutation_a', {num: payload.num})
+            }
+        }
+    }
+}

demo/vuex-modules/store/modules/ModuleB.js

@@ -0,0 +1,23 @@
+export const moduleB = {
+    namespaced: true,
+    state: {
+        state_b: 2,
+    },
+    getters: {
+        getter_b: (state) => {
+            return state.state_b + 10;
+        }
+    },
+    mutations: {
+        mutation_b: (state, payload) => {
+            state.state_b += payload.num;
+        }
+    },
+    actions: {
+        action_b: (content, payload) => {
+            if (content.state.state_b > 50) {
+                content.commit('mutation_b', {num: payload.num})
+            }
+        }
+    }
+}

demo/vuex-modules/views/CompositionAPIView.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 对state的操作 -->
+  <h3>对state的操作</h3>
+  <p><span><b>根-store.state.count: </b></span>{{ store.state.count }}</p>
+  <p><span><b>A-store.state.state_a: </b></span>{{ store.state.module_a.state_a }}</p>
+  <p><span><b>B-store.state.module_b.state_b: </b></span>{{ store.state.module_b.state_b }}</p>
+
+  <!-- 对getters的操作 -->
+  <h3>对getters的操作</h3>
+  <p><span><b>根-store.getters.getter(3): </b></span>{{ store.getters.getter(3) }}</p>
+  <p><span><b>A-store.getters.getter_a: </b></span>{{ store.getters.getter_a }}</p>
+  <p><span><b>B-store.getters['module_b/getter_b']: </b></span>{{ store.getters['module_b/getter_b'] }}</p>
+
+  <!-- 对mutations的操作 -->
+  <h3>对mutations的操作</h3>
+  <p><span><b>根-store.commit('mutation', {num: 7}): </b></span>
+    <button @click="root_mutation">点一下根store+7</button>
+  </p>
+  <p><span><b>A-store.commit('mutation_a', {num: 8}): </b></span>
+    <button @click="moduleA_mutation">点一下state_a+8</button>
+  </p>
+  <p><span><b>B-store.commit('module_b/mutation_b', {num: 9}): </b></span>
+    <button @click="moduleB_mutation">点一下state_b+9</button>
+  </p>
+
+    <!-- 对actions的操作 -->
+    <h3>对actions的操作</h3>
+    <p><span><b>根-store.dispatch('action', {num: 7}): </b></span>
+      <button @click="root_action">如果store>50 点一下store+10</button>
+    </p>
+    <p><span><b>A-store.dispatch('action_a', {num: 8}): </b></span>
+      <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
+    </p>
+    <p><span><b>B-store.dispatch('module_b/action_b', {num: 9}): </b></span>
+      <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
+    </p>
+</template>
+
+<script setup>
+import {useStore} from "vuex";
+
+// 实例化useStore对象
+const store = useStore()
+
+// 根store的mutation操作
+const root_mutation = () => {
+  store.commit('mutation', {num: 7})
+}
+
+// moduleA的mutation操作
+const moduleA_mutation = () => {
+  store.commit('mutation_a', {num: 8})
+}
+
+// moduleB的mutation操作
+const moduleB_mutation = () => {
+  store.commit('module_b/mutation_b', {num: 9})
+}
+
+// 根store的action操作
+const root_action = () => {
+  store.dispatch('action', {num: 7})
+}
+
+// moduleA的action操作
+const moduleA_action = () => {
+  store.dispatch('action_a', {num: 8})
+}
+
+// moduleB的action操作
+const moduleB_action = () => {
+  store.dispatch('module_b/action_b', {num: 9})
+}
+
+</script>
+
+<style scoped>
+
+</style>

demo/vuex-modules/views/OptionsAPIView.vue

@@ -0,0 +1,76 @@
+<template>
+  <!-- 对state的操作 -->
+  <h3>对state的操作</h3>
+  <p><span><b>根-this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
+  <p><span><b>A-this.$store.state.module_a.state_a: </b></span>{{ this.$store.state.module_a.state_a }}</p>
+  <p><span><b>B-this.$store.state.module_b.state_b: </b></span>{{ this.$store.state.module_b.state_b }}</p>
+
+  <!-- 对getters的操作 -->
+  <h3>对getters的操作</h3>
+  <p><span><b>根this.$store.getters.getter(3): </b></span>{{ this.$store.getters.getter(3) }}</p>
+  <p><span><b>A-this.$store.getters.getter_a: </b></span>{{ this.$store.getters.getter_a }}</p>
+  <p><span><b>B-this.$store.getters['module_b/getter_b']: </b></span>{{
+      this.$store.getters['module_b/getter_b']
+    }}</p>
+
+  <!-- 对mutations的操作 -->
+  <h3>对mutations的操作</h3>
+  <p><span><b>根-this.$store.commit('mutation', {num: 7}): </b></span>
+    <button @click="root_mutation">点一下根store+7</button>
+  </p>
+  <p><span><b>A-this.$store.commit('mutation_a', {num: 8}): </b></span>
+    <button @click="moduleA_mutation">点一下state_a+8</button>
+  </p>
+  <p><span><b>B-this.$store.commit('module_b/mutation_b', {num: 9}): </b></span>
+    <button @click="moduleB_mutation">点一下moduleB+9</button>
+  </p>
+
+  <!-- 对actions的操作 -->
+  <h3>对actions的操作</h3>
+  <p><span><b>根-this.$store.dispatch('action', {num: 7}): </b></span>
+    <button @click="root_action">如果store>50 点一下store+10</button>
+  </p>
+  <p><span><b>A-this.$store.dispatch('action_a', {num: 8}): </b></span>
+    <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
+  </p>
+  <p><span><b>B-this.$store.dispatch('module_b/action_b', {num: 9}): </b></span>
+    <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
+  </p>
+</template>
+
+<script>
+export default {
+  name: "OptionsAPIView",
+
+  methods: {
+    // 根store的mutation操作
+    root_mutation: function () {
+      this.$store.commit('mutation', {num: 7})
+    },
+    // moduleA的mutation操作
+    moduleA_mutation: function () {
+      this.$store.commit('mutation_a', {num: 8})
+    },
+    // moduleB的mutation操作
+    moduleB_mutation: function () {
+      this.$store.commit('module_b/mutation_b', {num: 9})
+    },
+    // 根store的action操作
+    root_action: function () {
+      this.$store.dispatch('action', {num: 7})
+    },
+    // moduleA的action操作
+    moduleA_action: function () {
+      this.$store.dispatch('action_a', {num: 8})
+    },
+    // moduleB的action操作
+    moduleB_action: function () {
+      this.$store.dispatch('module_b/action_b', {num: 9})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>