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.
77 lines
2.6 KiB
77 lines
2.6 KiB
1 year ago
|
<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>
|