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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/store/modules/ModuleA.js
  2. 6
      src/store/modules/ModuleB.js
  3. 84
      src/views/CompositionAPIView.vue
  4. 108
      src/views/OptionsAPIView.vue

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

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

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

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

84
src/views/CompositionAPIView.vue
Unescape View File

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

108
src/views/OptionsAPIView.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save