<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>