You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.6 KiB
76 lines
2.6 KiB
<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>
|
|
|