尚硅谷Vue系列教程学习笔记（12）

参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。
详细代码案例请移步本人gitee仓库： vue_basic案例代码实现
Vue-cli脚手架实现案例代码见仓库：vue01


//在store/index.js文件中的代码如下：
getters: {
        //用于处理sum放大十倍之后的逻辑
        bigSum(state) {
            return state.sum * 10
        }
    },

//在组件中直接使用模板即可得到
当前求和放大十倍之后为：{{$store.getters.bigSum}}


1
2
3
4
5
6
7
8
9
10
11
12
13

112-mapState和mapGetters

下面代码含义为：将mapState对象中的key:value全部展开放入到computed对象中。


 //计算属性
  computed:{
    //前边表示计算属性对象中的key值，后边加''的变量为state中本身存在的数据对象
    ...mapState({he:'sum',xuexiao:'school',xueke:"subject"})
  },


1
2
3
4
5
6
7
8

总结：上述的mapState说白了就是帮你生成代码用的，即借助mapState生成计算属性，上述代码为mapState的对象写法。

mapState的数组写法：

computed:{
    //前边表示计算属性对象中的key值，后边加''的变量为state中本身存在的数据对象
    ...mapState(['sum','school','subject'])
  },


1
2
3
4
5
6

mapGetters写法：

//计算属性
  computed:{
    ...mapState({he:'sum',xuexiao:'school',xueke:"subject"}),
    ...mapGetters(['bigSum'])
  },

1
2
3
4
5
6

113-mapActions和mapMutations

mapActions案例代码：

//Count.vue组件中代码






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

114-多组件共享数据

多组件共享数据案例实现代码：

//Count.vue组件中代码










//Person.vue组件中代码








//store/index.js中代码

import { createStore } from 'vuex'
//

//Vue3中创建store对象
const store = createStore({
    state: {
        sum: 0,
        school: "xjtu",
        subject: "ai",
        personList: [//设置的保存person的列表
            {id:"001",name:"wyy"},
        ]
    },
    actions: {

        // increment: function (context, value) {
        //     console.log("increment actions 调用了...")
        //     //调用store.commit
        //     context.commit('commitIncrement', value)
        // },
        // decrement: function (context, value) {
        //     console.log("decrement actions 调用了...")
        //     context.commit("commitDecrement", value)
        // },

        incrementOdd(context, value) {
            console.log(context)
            console.log("incrementOdd actionos 调用了...")
            if (context.state.sum % 2) {
                context.commit('commitIncrementOdd', value)
            }
        },
        incrementWait(context, value) {
            console.log('incrementWait actions 调用了...')
            //加入定时器逻辑
            setTimeout(() => {
                context.commit('commitIncrementWait', value)
            },500)
        }
    },
    mutations: {
        commitIncrement: function (state, value) {
            console.log("commitIncrement mutations调用了...")
            state.sum += value
        },
        commitDecrement: function (state, value) {
            console.log("commitDecrement mutations 调用了...")
            state.sum -= value
        },
        commitIncrementOdd(state, value) {
            console.log("commitIncrementOdd mutations 调用了...")
            state.sum += value
        },
        commitIncrementWait(state, value) {
            console.log('commitIncrementWait mutations 调用了...')
            state.sum += value
        },
        //增加人员的函数
        commitAddPerson(state,value) {
            console.log("commitAddPerson mutations 调用了...")
            state.personList.unshift(value)
        }

    },
    getters: {
        //用于处理sum放大十倍之后的逻辑
        bigSum(state) {
            return state.sum * 10
        }
    }
})

//向外暴露store对象
export default store


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

115-vuex模块化编码+namespace_1

实现案例代码：

//store/index.js文件中代码
import { createStore } from 'vuex'


//模块化编程
const countOptions = {
    namespaced: true,//写上namespace之后，在vue组件中调用mapState属性时，就可以使用下方store中的name:value中的name值进行定位。
    state: {
        sum: 0,
        school: "xjtu",
        subject: "ai",
    },

    actions: {

        // increment: function (context, value) {
        //     console.log("increment actions 调用了...")
        //     //调用store.commit
        //     context.commit('commitIncrement', value)
        // },
        // decrement: function (context, value) {
        //     console.log("decrement actions 调用了...")
        //     context.commit("commitDecrement", value)
        // },

        incrementOdd(context, value) {
            console.log(context)
            console.log("incrementOdd actionos 调用了...")
            if (context.state.sum % 2) {
                context.commit('commitIncrementOdd', value)
            }
        },
        incrementWait(context, value) {
            console.log('incrementWait actions 调用了...')
            //加入定时器逻辑
            setTimeout(() => {
                context.commit('commitIncrementWait', value)
            }, 500)
        }
    },

    mutations: {
        commitIncrement: function (state, value) {
            console.log("commitIncrement mutations调用了...")
            state.sum += value
        },
        commitDecrement: function (state, value) {
            console.log("commitDecrement mutations 调用了...")
            state.sum -= value
        },
        commitIncrementOdd(state, value) {
            console.log("commitIncrementOdd mutations 调用了...")
            state.sum += value
        },
        commitIncrementWait(state, value) {
            console.log('commitIncrementWait mutations 调用了...')
            state.sum += value
        },
    },

    getters: {
        //用于处理sum放大十倍之后的逻辑
        bigSum(state) {
            return state.sum * 10
        }

    }
}


const personOptions = {
    namespaced:true,
    state: {
        personList: [//设置的保存person的列表
            { id: "001", name: "wyy" },
        ]
    },

    actions: {

    },
    mutations: {
        //增加人员的函数
        commitAddPerson(state, value) {
            console.log("commitAddPerson mutations 调用了...")
            state.personList.unshift(value)
        }

    },
    getters: {

    },

}

//Vue3中创建store对象
const store = createStore({

    //模块化编程使用modules属性
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

//向外暴露store对象
export default store




//Count.vue组件中代码







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

116-Vuex模块化编程+namespace_2

案例实现代码：

//count.js代码
//模块化编程
const countOptions = {
    namespaced: true,//写上namespace之后，在vue组件中调用mapState属性时，就可以使用下方store中的name:value中的name值进行定位。
    state: {
        sum: 0,
        school: "xjtu",
        subject: "ai",
    },

    actions: {

        // increment: function (context, value) {
        //     console.log("increment actions 调用了...")
        //     //调用store.commit
        //     context.commit('commitIncrement', value)
        // },
        // decrement: function (context, value) {
        //     console.log("decrement actions 调用了...")
        //     context.commit("commitDecrement", value)
        // },

        incrementOdd(context, value) {
            console.log(context)
            console.log("incrementOdd actionos 调用了...")
            if (context.state.sum % 2) {
                context.commit('commitIncrementOdd', value)
            }
        },
        incrementWait(context, value) {
            console.log('incrementWait actions 调用了...')
            //加入定时器逻辑
            setTimeout(() => {
                context.commit('commitIncrementWait', value)
            }, 500)
        }
    },

    mutations: {
        commitIncrement: function (state, value) {
            console.log("commitIncrement mutations调用了...")
            state.sum += value
        },
        commitDecrement: function (state, value) {
            console.log("commitDecrement mutations 调用了...")
            state.sum -= value
        },
        commitIncrementOdd(state, value) {
            console.log("commitIncrementOdd mutations 调用了...")
            state.sum += value
        },
        commitIncrementWait(state, value) {
            console.log('commitIncrementWait mutations 调用了...')
            state.sum += value
        },
    },

    getters: {
        //用于处理sum放大十倍之后的逻辑
        bigSum(state) {
            return state.sum * 10
        }

    }
}

export default countOptions




//person.js文件代码

//引入axios
import axios from 'axios'
import { nanoid } from 'nanoid'

//配置personOptions选项
const personOptions = {
    namespaced: true,
    state: {
        personList: [//设置的保存person的列表
            { id: "001", name: "wyy" },
        ]
    },

    actions: {
        //设置只能增加姓王的人
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                //提交本次请求
                context.commit('commitAddPerson', value)
                console.log("增加姓王的人成功...")
            } else {
                console.log('该用户不姓王，增加失败...')
            }
        },
        
        //从服务器中获得一个人的姓名
        getPersonFromServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    //创建person对象
                    const person = {
                        id: nanoid(),
                        name:response.data
                    }
                    context.commit('commitAddPerson', person)
                },
                
                error => {
                    console.log('请求失败，错误信息为：', error.message)
                }
            )
        }

    },

    mutations: {
        //增加人员的函数
        commitAddPerson(state, value) {
            console.log("commitAddPerson mutations 调用了...")
            state.personList.unshift(value)
        }

    },
    getters: {
        //获得列表中第一个person的姓名
        getFirstPersonName(state) {
            //返回值name
            return state.personList[0].name
        }

    },

}

export default personOptions


//src/store/index.js代码
import { createStore } from 'vuex'
import countOptions from './count'
import personOptions from './person'


//Vue3中创建store对象
const store = createStore({

    //模块化编程使用modules属性
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

//向外暴露store对象
export default store


/.vue组件中的代码保持不变即可



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

117-Vue中的路由简介

路由的简介：
1.路由就是一组key:value的对应关系；
2.多个路由需要经过路由器的管理；

重点：提倡现在的web应用都做为SPA应用，即单页面应用。

Vue router会实时检测应用中路径的变化，此时key就是路径，value就是不同的组件。

vue-router是一个插件，可以监听应用路径的改变。

SPA单页面应用的数据获取需要请求ajax实现。

路由的分类：
1.前端路由：Vue-router控制前端页面的切换，在不同组件之间的切换；
2.后端路由：value是一个function，用于处理客户端提交的请求，过程：服务器接收到一个请求，找到请求中的function之后对请求进行处理，同时返回响应数据；

118-路由的基本使用

路由的基本使用案例代码：

//main.js中代码
//引入Vue
import { createApp } from 'vue'

//引入store对象
// import store from './store/index'

//引入App组件，它是所有组件的父组件
import App from './App.vue'

//引入vueRouter插件
// import vueRouter from 'vue-router'

//引入配置好的路由器
import router from './router/index.js'

//创建Vue实例对象
const app = createApp(App)

//引入Vuex插件
// import Vuex from 'vuex'

//在挂载之前使用Vuex插件
// app.use(Vuex)

//使用store对象
// app.use(store)

//使用路由器
app.use(router)

//使用vue-router插件
// app.use(vueRouter)


//完成最后的挂载
app.mount('#app')



//router/index.js中代码
//引入vue-router插件
import { createRouter, createWebHashHistory } from 'vue-router'   // 使用插件可以不加这个

//引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'

//配置路径：key:value的对应关系
const routes = [
    { path: '/About', name: "About", component: About },
    { path: '/Home', name: "Home", component: Home },
]

//创建路由器对象
const router = createRouter({
    history: createWebHashHistory('/'),  // 编写后台就这么写
    routes,
})


export default router


/App.vue组件中代码

    






//About.vue组件中代码








//Home.vue组件中代码






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

119-路由的几个基本注意点

组件分为：
1.路由组件；
2.一般组件；

一般组件即表示无需程序员手工写入的组件，直接在App.vue组件中引入并写在html标签体中的；路由组件为vue-router渲染后放入到App.vue中的组件。

注意：
pages文件夹中主要存放路由组件；
components文件夹中主要存放一般组件；

重点：不使用的路由组件实际上是被Vue销毁了。

120-嵌套路由（也叫做多级路由）

多级路由实现代码：


//router/index.js文件中的配置
//引入vue-router插件
import { createRouter, createWebHashHistory } from 'vue-router'   // 使用插件可以不加这个

//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import Message from '../pages/Message.vue'
import News from '../pages/News.vue'


//配置路径：key:value的对应关系
const routes = [
    {
        path: '/about', name: "about", component: About
    },
    {
        path: '/home',
        name: "home", component: Home,
        children: [
            { path: "message", name: "message", component: Message },
            { path: "news", name: "news", component: News }
        ]
    },
]

//创建路由器对象
const router = createRouter({
    history: createWebHashHistory('/'),  // 编写后台就这么写
    routes,
})


export default router



//Home.vue组件中配置





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

//截止到2022.9.2上午10：13止

相关阅读:
分类模型总结
 List＜Map＜String, String＞＞数据行转列
 经典快速制作套打证书模板(doc)大全
 2022.8.13
【allegro 17.4软件操作保姆级教程六】布线操作基础之一
 记一次线上环境排查错误过程
 ssrf学习笔记总结
 为什么要做数据可视化系统
 Dataset 的一些 Java api 操作
 019-JAVA访问权限、封装详细讲解
原文地址：https://blog.csdn.net/weixin_43749999/article/details/126657087

尚硅谷Vue系列教程学习笔记（12）