完成 mapState mapGetters mapMutations mapActions

1 year ago · 2190969935
parent 7cbeff5925
commit 2190969935
8 changed files with 362 additions and 0 deletions
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/App.vue
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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>
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/main.js
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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')
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/router/index.js
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/store/index.js
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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)
+        }
+    }
+})
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/store/modules/ModuleA.js
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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})
+            }
+        }
+    }
+}
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/store/modules/ModuleB.js
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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})
+            }
+        },
+    }
+}
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/views/CompositionAPIView.vue
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/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>
--- a/demo/vuex-mapState-mapGetters-mapMutations-mapActions/views/OptionsAPIView.vue
+++ b/demo/vuex-mapState-mapGetters-mapMutations-mapActions/views/OptionsAPIView.vue
@ -0,0 +1,150 @@
+<template>
+  <!-- 对state的操作 -->
+  <h3>对state的操作</h3>
+  <p><span><b>根-count: </b></span>{{ count }}</p>
+  <p><span><b>A-state_a: </b></span>{{ state_a }}</p>
+  <p><span><b>B-state_b: </b></span>{{ state_b }}</p>
+
+  <!-- 对getters的操作 -->
+  <h3>对getters的操作</h3>
+  <p><span><b>根-getter(3): </b></span>{{ getter(3) }}</p>
+  <p><span><b>A-getter_a: </b></span>{{ getter_a }}</p>
+  <p><span><b>B-getter_b: </b></span>{{ getter_b }}</p>
+
+  <!-- 对mutations的操作 -->
+  <h3>对mutations的操作</h3>
+  <p><span><b>根-@click="mutation({num: 7})": </b></span>
+    <button @click="mutation({num: 7})">点一下根store+7</button>
+  </p>
+  <p><span><b>A-@click="mutation_a({num: 8})": </b></span>
+    <button @click="mutation_a({num: 8})">点一下state_a+8</button>
+  </p>
+  <p><span><b>B-@click="mutation_b({num: 9})": </b></span>
+    <button @click="mutation_b({num: 9})">点一下moduleB+9</button>
+  </p>
+
+  <!-- 对actions的操作 -->
+  <h3>对actions的操作</h3>
+  <p><span><b>根-@click="action({num: 7})": </b></span>
+    <button @click="action({num: 7})">如果store>50 点一下store+10</button>
+  </p>
+  <p><span><b>A-@click="action_a({num: 8})": </b></span>
+    <button @click="action_a({num: 8})">如果state_a>50 点一下state_a+8</button>
+  </p>
+  <p><span><b>B-@click="action_b({num: 9})": </b></span>
+    <button @click="action_b({num: 9})">如果state_b>50 点一下state_b+9</button>
+  </p>
+
+  <h3>混合用法</h3>
+  <p><span><b>state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a: </b></span>{{
+      state_b_getter_a
+    }}</p>
+  <p><span><b>state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"]: </b></span>{{
+      state_a_getter_b
+    }}</p>
+  <p><span><b>state_b_getter_b: (state, getters) => state.state_b + getters.getter_b: </b></span>{{ state_b_getter_b }}
+  </p>
+  <p><span><b>@click="mutation_a_count(100): </b></span>
+    <button @click="mutation_a_count(100)">如果state_a>50 点一下state_a+100</button>
+  </p>
+  <p><span><b>@click="action_b_count(200): </b></span>
+    <button @click="action_b_count(200)">如果state_b>50 点一下state_b+200</button>
+  </p>
+
+</template>
+
+<script>
+import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
+
+export default {
+  name: "OptionsAPIView",
+  // computed 用于 mapState和mapGetters
+  computed: {
+    // // 数组形式
+    // // 映射全局state
+    // ...mapState(["count", "state_a"]),  // state名称就是map后的名称，这里模块中的state是无法映射的
+    // // 映射带有名称空间的state
+    // ...mapState("module_b", ["state_b"]),  // 第一个参数为模块的别名
+    //
+    // // 映射全局Getters
+    // ...mapGetters(["getter", "getter_a"]),
+    // // 映射带有命名空间的Getters
+    // ...mapGetters("module_b", ["getter_b"]),
+
+    // 对象形式
+    // 映射全局state和带有namespaced命名空间的state
+    ...mapState({
+      count: "count",
+      state_a: state => state.module_a.state_a,
+      // state_b: state => state.module_b.state_b
+    }),
+    // 指定命名空间的state映射
+    ...mapState("module_b", {
+      state_b: state => state.state_b
+    }),
+
+    // 映射全局Getters
+    ...mapGetters({
+      getter: "getter",
+      getter_a: "getter_a"
+    }),
+    // 映射带有命名空间的Getters
+    ...mapGetters("module_b", {
+      getter_b: "getter_b",
+    }),
+
+    // 混合用法
+    ...mapState({
+      state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a,
+      state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"],
+    }),
+    ...mapState("module_b", {
+      state_b_getter_b: (state, getters) => state.state_b + getters.getter_b,
+    })
+
+  },
+  methods: {
+    // // 数组形式
+    // // 映射全局的 mutations
+    // ...mapMutations(["mutation", "mutation_a"]),
+    // // 映射带有命名空间的mutations
+    // ...mapMutations("module_b", ["mutation_b"]),
+    // // 映射全局的 actions
+    // ...mapActions(["action", "action_a"]),
+    // // 映射带有命名空间的actions
+    // ...mapActions("module_b", ["action_b"]),
+
+    // 对象形式
+    // 映射全局的mutations
+    ...mapMutations({
+      mutation: "mutation",
+      mutation_a: "mutation_a",
+    }),
+    // 映射带有命名空间的mutations
+    ...mapMutations("module_b", {
+      mutation_b: "mutation_b",
+    }),
+    // 映射全局的actions
+    ...mapActions({
+      action: "action",
+      action_a: "action_a"
+    }),
+    // 映射带有命名空间namespaced的actions
+    ...mapActions("module_b", {
+      action_b: "action_b"
+    }),
+    // 组合用法
+    ...mapMutations({
+      mutation_a_count: (commit, count) => commit("mutation_a", {num: count})
+    }),
+    ...mapActions("module_b", {
+      action_b_count: (dispatch, count) => dispatch("action_b", {num: count})
+    })
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>