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

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

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

111-getters配置项

注意：getters中可以实现一些需要共享的运算逻辑等。

实现案例代码：

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

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

112-mapState和mapGetters

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

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

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

mapState的数组写法：

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

mapGetters写法：

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

113-mapActions和mapMutations

mapActions案例代码：

//Count.vue组件中代码

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

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组件中代码

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组件中的代码保持不变即可

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组件中代码

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组件中配置

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