RogerWorkPC
/
vue3_element_demo1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成modules的学习

Browse Source
main
RogerWork 1 year ago
parent c95e81ef13
commit e465b660f2
4 changed files with 125 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/store/modules/ModuleA.js
  2. 4
      src/store/modules/ModuleB.js
  3. 80
      src/views/CompositionAPIView.vue
  4. 108
      src/views/OptionsAPIView.vue

6
src/store/modules/ModuleA.js
Unescape View File

@ -9,12 +9,14 @@ export const moduleA = {
}, },
mutations: { mutations: {
mutation_a(state, payload) { mutation_a(state, payload) {
state.state_a + payload.num; state.state_a += payload.num;
} }
}, },
actions: { actions: {
action_a(content, payload){ action_a(content, payload) {
if (content.state.state_a > 50) {
content.commit('mutation_a', {num: payload.num}) content.commit('mutation_a', {num: payload.num})
} }
} }
}
} }

4
src/store/modules/ModuleB.js
Unescape View File

@ -10,12 +10,14 @@ export const moduleB = {
}, },
mutations: { mutations: {
mutation_b: (state, payload) => { mutation_b: (state, payload) => {
state.state_b + payload.num; state.state_b += payload.num;
} }
}, },
actions: { actions: {
action_b: (content, payload) => { action_b: (content, payload) => {
if (content.state.state_b > 50) {
content.commit('mutation_b', {num: payload.num}) content.commit('mutation_b', {num: payload.num})
} }
} }
}
} }

80
src/views/CompositionAPIView.vue
Unescape View File

@ -1,49 +1,75 @@
<template> <template>
<!-- 对state的操作 --> <!-- 对state的操作 -->
<p><span><b>store.state.count: </b></span>{{ store.state.count }}</p> <h3>对state的操作</h3>
<p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p> <p><span><b>根-store.state.count: </b></span>{{ store.state.count }}</p>
<!-- 对getters的操作，分为无参和传参 --> <p><span><b>A-store.state.state_a: </b></span>{{ store.state.module_a.state_a }}</p>
<p><span><b>store.getters.doubleCount: </b></span>{{ store.getters.doubleCount }}</p> <p><span><b>B-store.state.module_b.state_b: </b></span>{{ store.state.module_b.state_b }}</p>
<p><span><b>store.getters.moreCount(10): </b></span>{{ store.getters.moreCount(10) }}</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的操作 --> <!-- 对mutations的操作 -->
<p><span><b>store.commit('increment', {num: 7}): </b></span> <h3>对mutations的操作</h3>
<button @click="inc">点一下count+7</button> <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>
<p><span><b>store.commit({type: "increment", num: 5}): </b></span> <p><span><b>B-store.commit('module_b/mutation_b', {num: 9}): </b></span>
<button @click="inc2">点一下count+5</button> <button @click="moduleB_mutation">点一下state_b+9</button>
</p> </p>
<!-- 对actions的操作 --> <!-- 对actions的操作 -->
<p><span><b>store.commit({type: "increment", num: 5}): </b></span> <h3>对actions的操作</h3>
<button @click="inc_action1">如果count>50 点一下count+10</button> <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>
<p><span><b>store.dispatch({type: 'inc_actions', num: 5}): </b></span> <p><span><b>B-store.dispatch('module_b/action_b', {num: 9}): </b></span>
<button @click="inc_action2">如果count>50 点一下count+8</button> <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
</p> </p>
</template> </template>
<script setup> <script setup>
import {computed} from "vue";
import {useStore} from "vuex"; import {useStore} from "vuex";
// 实例化useStore对象 // 实例化useStore对象
const store = useStore() const store = useStore()
// 本地方法中调用vuex
const halfCount = computed(() => store.state.count * 0.5); // 根store的mutation操作
// 属性方式映射vuex中的mutations，必须使用commit方法订阅mutations const root_mutation = () => {
// 属性形式订阅mutations store.commit('mutation', {num: 7})
const inc = () => {
store.commit('increment', {num: 7})
} }
// 对象形式订阅mutations， type是mutations的名称
const inc2 = () => { // moduleA的mutation操作
store.commit({type: "increment", num: 5}) const moduleA_mutation = () => {
store.commit('mutation_a', {num: 8})
}
// moduleB的mutation操作
const moduleB_mutation = () => {
store.commit('module_b/mutation_b', {num: 9})
} }
const inc_action1 = () => {
store.dispatch('inc_actions', {num: 7}) // 根store的action操作
const root_action = () => {
store.dispatch('action', {num: 7})
}
// moduleA的action操作
const moduleA_action = () => {
store.dispatch('action_a', {num: 8})
} }
const inc_action2 = () => { // moduleB的action操作
store.dispatch({type: 'inc_actions', num: 5}) const moduleB_action = () => {
store.dispatch('module_b/action_b', {num: 9})
} }
</script> </script>

108
src/views/OptionsAPIView.vue
Unescape View File

@ -1,59 +1,73 @@
<template> <template>
<!-- 对state的操作 --> <!-- 对state的操作 -->
<p><span><b>根store-this.$store.state.count: </b></span>{{ this.$store.state.count }}</p> <h3>对state的操作</h3>
<p><span><b>moduleA-this.$store.state.module_a.state_a: </b></span>{{ this.$store.state.module_a.state_a }}</p> <p><span><b>根-this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
<p><span><b>moduleA-this.$store.state.module_b.state_b: </b></span>{{ this.$store.state.module_b.state_b }}</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>moduleB-this.$store.state.count: </b></span>{{ this.$store.module_b.state.state_b }}</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>
<!-- &lt;!&ndash; 对getters的操作，分为无参和传参 &ndash;&gt;--> <!-- 对mutations的操作 -->
<!-- <p><span><b>this.$store.getters.doubleCount: </b></span>{{ this.$store.getters.doubleCount }}</p>--> <h3>对mutations的操作</h3>
<!-- <p><span><b>this.$store.getters.moreCount(10): </b></span>{{ this.$store.getters.moreCount(10) }}</p>--> <p><span><b>根-this.$store.commit('mutation', {num: 7}): </b></span>
<!-- &lt;!&ndash; 对mutations的操作 &ndash;&gt;--> <button @click="root_mutation">点一下根store+7</button>
<!-- <p><span><b>this.$store.commit('increment', {num: 7})}: </b></span>--> </p>
<!-- <button @click="inc">点一下count+7</button>--> <p><span><b>A-this.$store.commit('mutation_a', {num: 8}): </b></span>
<!-- </p>--> <button @click="moduleA_mutation">点一下state_a+8</button>
<!-- <p><span><b>this.$store.commit({type: "increment", num: 5})}: </b></span>--> </p>
<!-- <button @click="inc2">点一下count+5</button>--> <p><span><b>B-this.$store.commit('module_b/mutation_b', {num: 9}): </b></span>
<!-- </p>--> <button @click="moduleB_mutation">点一下moduleB+9</button>
<!-- &lt;!&ndash; 对actions的操作 &ndash;&gt;--> </p>
<!-- <p><span><b>this.$store.dispatch('inc_actions', {num: 7})}: </b></span>-->
<!-- <button @click="inc_action1">如果count>50 点一下count+10</button>--> <!-- 对actions的操作 -->
<!-- </p>--> <h3>对actions的操作</h3>
<!-- <p><span><b>this.$store.dispatch({type: 'inc_actions', num: 5})}: </b></span>--> <p><span><b>根-this.$store.dispatch('action', {num: 7}): </b></span>
<!-- <button @click="inc_action2">如果count>50 点一下count+8</button>--> <button @click="root_action">如果store>50 点一下store+10</button>
<!-- </p>--> </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> </template>
<script> <script>
export default { export default {
name: "OptionsAPIView", name: "OptionsAPIView",
// 通过computed来映射state数据
// computed: { methods: {
// halfCount: function () { // 根store的mutation操作
// console.log(this.$store) root_mutation: function () {
// return this.$store.state_a this.$store.commit('mutation', {num: 7})
// } },
// }, // moduleA的mutation操作
// methods: { moduleA_mutation: function () {
// // 属性形式订阅mutations this.$store.commit('mutation_a', {num: 8})
// inc: function () { },
// this.$store.commit('increment', {num: 7}) // moduleB的mutation操作
// }, moduleB_mutation: function () {
// // 对象形式订阅mutations， type是mutations的名称 this.$store.commit('module_b/mutation_b', {num: 9})
// inc2: function () { },
// this.$store.commit({ // 根store的action操作
// type: "increment", root_action: function () {
// num: 5 this.$store.dispatch('action', {num: 7})
// }) },
// }, // moduleA的action操作
// inc_action1: function () { moduleA_action: function () {
// this.$store.dispatch('inc_actions', {num: 7}) this.$store.dispatch('action_a', {num: 8})
// }, },
// inc_action2: function () { // moduleB的action操作
// this.$store.dispatch({type: 'inc_actions', num: 5}) moduleB_action: function () {
// } this.$store.dispatch('module_b/action_b', {num: 9})
// } }
}
} }
</script> </script>

Write Preview
Loading…
Cancel
Save