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.
80 lines
2.4 KiB
80 lines
2.4 KiB
1 year ago
|
<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>
|