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.
79 lines
2.4 KiB
79 lines
2.4 KiB
<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>
|
|
|