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

完成了vuex中的state，getters，mutations和actions的学习

Browse Source
main
RogerWork 1 year ago
parent 2f937141f8
commit 3ea54bdbae
9 changed files with 234 additions and 0 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. 13
      demo/vuex-state-getters-mutations-actions/App.vue
  2. 6
      demo/vuex-state-getters-mutations-actions/main.js
  3. 32
      demo/vuex-state-getters-mutations-actions/router/index.js
  4. 34
      demo/vuex-state-getters-mutations-actions/store/index.js
  5. 53
      demo/vuex-state-getters-mutations-actions/views/CompositionAPIView.vue
  6. 57
      demo/vuex-state-getters-mutations-actions/views/OptionsAPIView.vue
  7. 12
      src/store/index.js
  8. 14
      src/views/CompositionAPIView.vue
  9. 13
      src/views/OptionsAPIView.vue

13
demo/vuex-state-getters-mutations-actions/App.vue
Unescape View File

@ -0,0 +1,13 @@
<template>
<div>
<router-link :to="{name:'options'}">OptionsAPI</router-link>
|
<router-link :to="{name:'composition'}">CompositionAPI</router-link>
</div>
<div>
<router-view></router-view>
</div>
</template>
<script setup>
</script>

6
demo/vuex-state-getters-mutations-actions/main.js
Unescape View File

@ -0,0 +1,6 @@
import {createApp} from "vue";
import App from "./App.vue"
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')

32
demo/vuex-state-getters-mutations-actions/router/index.js
Unescape View File

@ -0,0 +1,32 @@
// 引入必要的router组件
import {createRouter, createWebHistory} from 'vue-router'
// 引入视图
const OptionsAPI = () => import('../views/OptionsAPIView.vue')
const CompositionAPI = () => import('../views/CompositionAPIView.vue')
// 引入组件
// 创建路由
const routes = [
{
path: '/options',
name: 'options',
component: OptionsAPI
},
{
path: '/composition',
name: 'composition',
component: CompositionAPI
},
]
// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出路由
export default router

34
demo/vuex-state-getters-mutations-actions/store/index.js
Unescape View File

@ -0,0 +1,34 @@
import {createStore} from "vuex";
export default createStore({
state: {
count: 2,
},
getters: {
// getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
doubleCount: (state) => {
return state.count * 2
},
moreCount: (state) => (n) => {
return state.count * n
}
},
mutations: {
// payload用于携带参数
increment(state, payload) {
state.count += payload.num
}
},
actions: {
inc_actions(content, payload) {
// 模拟异步操作
setTimeout(() => {
// rep 模拟axios请求返回的数据
const rep = 3;
if (content.state.count > 50) {
content.commit('increment', {num: rep+payload.num});
}
}, 1000)
}
}
})

53
demo/vuex-state-getters-mutations-actions/views/CompositionAPIView.vue
Unescape View File

@ -0,0 +1,53 @@
<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>
<!-- 对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>
</p>
<!-- 对actions的操作 -->
<p><span><b>store.commit({type: "increment", num: 5}): </b></span>
<button @click="inc_action1">如果count>50 点一下count+10</button>
</p>
<p><span><b>store.dispatch({type: 'inc_actions', num: 5}): </b></span>
<button @click="inc_action2">如果count>50 点一下count+8</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})
}
// 对象形式订阅mutations， type是mutations的名称
const inc2 = () => {
store.commit({type: "increment", num: 5})
}
const inc_action1 = () => {
store.dispatch('inc_actions', {num: 7})
}
const inc_action2 = () => {
store.dispatch({type: 'inc_actions', num: 5})
}
</script>
<style scoped>
</style>

57
demo/vuex-state-getters-mutations-actions/views/OptionsAPIView.vue
Unescape View File

@ -0,0 +1,57 @@
<template>
<!-- 对state的操作 -->
<p><span><b>this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
<p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
<!-- 对getters的操作，分为无参和传参 -->
<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>
<!-- 对mutations的操作 -->
<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>
<!-- 对actions的操作 -->
<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>
</template>
<script>
export default {
name: "OptionsAPIView",
// 通过computed来映射state数据
computed: {
halfCount: function () {
return this.$store.state.count * 0.5
}
},
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})
}
}
}
</script>
<style scoped>
</style>

12
src/store/index.js
Unescape View File

@ -18,5 +18,17 @@ export default createStore({
increment(state, payload) {
state.count += payload.num
}
},
actions: {
inc_actions(content, payload) {
// 模拟异步操作
setTimeout(() => {
// rep 模拟axios请求返回的数据
const rep = 3;
if (content.state.count > 50) {
content.commit('increment', {num: rep+payload.num});
}
}, 1000)
}
}
})

14
src/views/CompositionAPIView.vue
Unescape View File

@ -12,6 +12,13 @@
<p><span><b>store.commit({type: "increment", num: 5}): </b></span>
<button @click="inc2">点一下count+5</button>
</p>
<!-- 对actions的操作 -->
<p><span><b>store.commit({type: "increment", num: 5}): </b></span>
<button @click="inc_action1">如果count>50 点一下count+10</button>
</p>
<p><span><b>store.dispatch({type: 'inc_actions', num: 5}): </b></span>
<button @click="inc_action2">如果count>50 点一下count+8</button>
</p>
</template>
<script setup>
@ -31,6 +38,13 @@ const inc = () => {
const inc2 = () => {
store.commit({type: "increment", num: 5})
}
const inc_action1 = () => {
store.dispatch('inc_actions', {num: 7})
}
const inc_action2 = () => {
store.dispatch({type: 'inc_actions', num: 5})
}
</script>

13
src/views/OptionsAPIView.vue
Unescape View File

@ -12,6 +12,13 @@
<p><span><b>this.$store.commit({type: "increment", num: 5})}: </b></span>
<button @click="inc2">点一下count+5</button>
</p>
<!-- 对actions的操作 -->
<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>
</template>
<script>
@ -34,6 +41,12 @@ export default {
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})
}
}
}

Write Preview
Loading…
Cancel
Save