【Vue】学习笔记

2023-06-06 19:26| 来源: 网络整理| 查看: 265

Vuex 理解VuexVuex是什么什么时候使用VuexVuex 工作原理图求和案例使用纯vue编写搭建Vuex环境使用Vuex编写求和案例getters配置项四个map方法的使用多组件共享数据案例模块化+命名空间

理解Vuex Vuex是什么概念：专门在vue中实现集中式状态(数据) 管理的一个vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信Vuex Gihub地址在这里插入图片描述

什么时候使用Vuex 多个组件依赖于同一状态来自不同组件的行为需要变更同一状态 Vuex 工作原理图

在这里插入图片描述。

求和案例使用纯vue编写

在这里插入图片描述 src/App.vue

import Count from './components/Count' export default { name:'App', components:{Count}, }

src/components/Count.vue

当前求和为：{{sum}} 1 2 3 + - 当前求和为奇数再加等一等再加 export default { name:'Count', data() { return { n:1, //用户选择的数字 sum:0 //当前的和 } }, methods: { increment(){ this.sum += this.n }, decrement(){ this.sum -= this.n }, incrementOdd(){ if(this.sum % 2){ this.sum += this.n } }, incrementWait(){ setTimeout(()=>{ this.sum += this.n },500) }, }, } button{ margin-left: 5px; } 搭建Vuex环境下载安装 vuex npm i vuex(注意版本vue2.0 对应vuex3 vue3.0对应vux4)创建src/store/index.js 该文件用于创建Vuex中最为核心的store //该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions——用于响应组件中的动作 const actions = {} //准备mutations——用于操作数据（state） const mutations = {} //准备state——用于存储数据 const state = {} //创建并暴露store export default new Vuex.Store({ actions, mutations, state, }) 在src/main.js 中创建vm时传入store 配置项 //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入store import store from './store' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App), store, beforeCreate() { Vue.prototype.$bus = this } }) 使用Vuex编写求和案例

Vuex的基本使用

初始化数据state,配置actions、mutations，操作文件store.js组件中读取vuex中的数据$store.state.数据组件中修改vuex中的数据$store.dispatch('action的方法名',数据)或$store.commit('mutations中的方法名',函数) 若没有网络请求或其他业务逻辑，组件也可以越过actions,即不写dispatch,直接编写commit src/store/index.js 该文件用于创建vuex中最核心的store //该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions——用于响应组件中的动作 const actions = { /* jia(context,value){ console.log('actions中的jia被调用了') context.commit('JIA',value) }, jian(context,value){ console.log('actions中的jian被调用了') context.commit('JIAN',value) }, */ jiaOdd(context,value){ console.log('actions中的jiaOdd被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) } } //准备mutations——用于操作数据（state） const mutations = { JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被调用了') state.sum -= value } } //准备state——用于存储数据 const state = { sum:0 //当前的和 } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })

src/components/Count.vue

当前求和为：{{$store.state.sum}} 1 2 3 + - 当前求和为奇数再加等一等再加 export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, methods: { increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, }, mounted() { console.log('Count',this) }, } button{ margin-left: 5px; } getters配置项概念：当state中的数据需要经过加工后再使用时，可以使用getters 加工，相当于全局计算属性在store.js 中追加getters配置 ..... //准备getters——用于将state中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters }) 组件中读取数据 $store.getters.bigSum 在这里插入图片描述

src/store/index.js //该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions——用于响应组件中的动作 const actions = { /* jia(context,value){ console.log('actions中的jia被调用了') context.commit('JIA',value) }, jian(context,value){ console.log('actions中的jian被调用了') context.commit('JIAN',value) }, */ jiaOdd(context,value){ console.log('actions中的jiaOdd被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) } } //准备mutations——用于操作数据（state） const mutations = { JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被调用了') state.sum -= value } } //准备state——用于存储数据 const state = { sum:0 //当前的和 } //准备getters——用于将state中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters })

src/Count.vue

当前求和为：{{$store.state.sum}} 当前求和放大10倍为：{{$store.getters.bigSum}} 1 2 3 + - 当前求和为奇数再加等一等再加 export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, methods: { increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, }, mounted() { console.log('Count',this.$store) }, } button{ margin-left: 5px; } 四个map方法的使用 mapState方法：用于帮助映射state 中的数据为计算属性 computed:{ //借助mapState生成计算属性，从state中读取数据。（对象写法） ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}), //借助mapState生成计算属性，从state中读取数据。（数组写法） ...mapState(['sum','school','subject']), } mapGetters方法：用于帮助映射getters中的数据为计算属性 computed:{ //借助mapGetters生成计算属性，从getters中读取数据。（对象写法） ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters(['bigSum']) } mapActions方法：用于帮助生成与actions对话的方法，即包含$store.dispath(xxx)的函数 methods: { //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法) ...mapActions(['jiaOdd','jiaWait']) } mapMutations方法：用于帮助生成与mutations对话的方法，即包含$store.commit(xxx)的函数 methods: { //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法) ...mapMutations(['JIA','JIAN']), }

注意：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象 src/components/Count.vue

当前求和为：{{sum}} 当前求和放大10倍为：{{bigSum}} 我在{{school}}，学习{{subject}} 1 2 3 + - 当前求和为奇数再加等一等再加 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, computed:{ //借助mapState生成计算属性，从state中读取数据。（对象写法） // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}), //借助mapState生成计算属性，从state中读取数据。（数组写法） ...mapState(['sum','school','subject']), /* ******************************************************************** */ //借助mapGetters生成计算属性，从getters中读取数据。（对象写法） // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters(['bigSum']) }, methods: { //程序员亲自写方法 /* increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, */ //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法) // ...mapMutations(['JIA','JIAN']), /* ************************************************* */ //程序员亲自写方法 /* incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, */ //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法) // ...mapActions(['jiaOdd','jiaWait']) }, mounted() { const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'}) console.log(x) }, } button{ margin-left: 5px; } 多组件共享数据案例

在这里插入图片描述 src/App.vue

import Count from './components/Count' import Person from './components/Person' export default { name:'App', components:{Count,Person}, mounted() { // console.log('App',this) }, }

src/store/index.js 该文件用于创建Vuex中最为核心的store

//该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions——用于响应组件中的动作 const actions = { /* jia(context,value){ console.log('actions中的jia被调用了') context.commit('JIA',value) }, jian(context,value){ console.log('actions中的jian被调用了') context.commit('JIAN',value) }, */ jiaOdd(context,value){ console.log('actions中的jiaOdd被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) } } //准备mutations——用于操作数据（state） const mutations = { JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被调用了') state.sum -= value }, ADD_PERSON(state,value){ console.log('mutations中的ADD_PERSON被调用了') state.personList.unshift(value) } } //准备state——用于存储数据 const state = { sum:0, //当前的和 school:'尚硅谷', subject:'前端', personList:[ {id:'001',name:'张三'} ] } //准备getters——用于将state中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters })

src/components/Count.vue

当前求和为：{{sum}} 当前求和放大10倍为：{{bigSum}} 我在{{school}}，学习{{subject}} Person组件的总人数是：{{personList.length}} 1 2 3 + - 当前求和为奇数再加等一等再加 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, computed:{ //借助mapState生成计算属性，从state中读取数据。（数组写法） ...mapState(['sum','school','subject','personList']), //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters(['bigSum']) }, methods: { //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) }, mounted() { // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'}) // console.log(x) }, } button{ margin-left: 5px; }

src/components/Person.vue

人员列表 Count组件求和为：{{sum}} 添加 {{p.name}} import {nanoid} from 'nanoid' export default { name:'Person', data() { return { name:'' } }, computed:{ personList(){ return this.$store.state.personList }, sum(){ return this.$store.state.sum } }, methods: { add(){ const personObj = {id:nanoid(),name:this.name} this.$store.commit('ADD_PERSON',personObj) this.name = '' } }, } 模块化+命名空间

目的：让代码更好维护，让多种数据分录更加明确

修改store.js 为了解决不同模块命名冲突的问题，将不同模块的namespaced:true,之后在不同页面中引入getter actions mutations时，需要加上所属的模块名在这里插入图片描述

开启命名空间后，组件中读取state数据

//方式一：自己直接读取 this.$store.state.personAbout.list //方式二：借助mapState读取 ...mapState('countAbout',['sum','school','subject']), 开启命名空间后，组件中读取getter数据 //方法一：自己直接读取 thsi.$store.getters['personAbount/firstPersonName'] //方法二：借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters('countAbout',['bigSum']) 开始命名空间后，组件中调用dispatch //方式一：自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方法二：借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) 开启命名空间后，组件中调用commit //方式一：自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二：借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法) ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

src/storte/index.js

//该文件用于创建Vuex中最为核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' import countOptions from './count' import personOptions from './person' //应用Vuex插件 Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ modules:{ countAbout:countOptions, personAbout:personOptions } })

src/store/count.js

//求和相关的配置 export default { namespaced:true, actions:{ jiaOdd(context,value){ console.log('actions中的jiaOdd被调用了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被调用了') setTimeout(()=>{ context.commit('JIA',value) },500) } }, mutations:{ JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被调用了') state.sum -= value }, }, state:{ sum:0, //当前的和 school:'尚硅谷', subject:'前端', }, getters:{ bigSum(state){ return state.sum*10 } }, }

src/store/person.js

//人员管理相关的配置 import axios from 'axios' import { nanoid } from 'nanoid' export default { namespaced:true, actions:{ addPersonWang(context,value){ if(value.name.indexOf('王') === 0){ context.commit('ADD_PERSON',value) }else{ alert('添加的人必须姓王！') } }, addPersonServer(context){ axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then( response => { context.commit('ADD_PERSON',{id:nanoid(),name:response.data}) }, error => { alert(error.message) } ) } }, mutations:{ ADD_PERSON(state,value){ console.log('mutations中的ADD_PERSON被调用了') state.personList.unshift(value) } }, state:{ personList:[ {id:'001',name:'张三'} ] }, getters:{ firstPersonName(state){ return state.personList[0].name } }, }

src/components/Count.vue

当前求和为：{{sum}} 当前求和放大10倍为：{{bigSum}} 我在{{school}}，学习{{subject}} Person组件的总人数是：{{personList.length}} 1 2 3 + - 当前求和为奇数再加等一等再加 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, computed:{ //借助mapState生成计算属性，从state中读取数据。（数组写法） ...mapState('countAbout',['sum','school','subject']), ...mapState('personAbout',['personList']), //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters('countAbout',['bigSum']) }, methods: { //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法) ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}), //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) }, mounted() { console.log(this.$store) }, } button{ margin-left: 5px; }

src/components/person.vue

人员列表 Count组件求和为：{{sum}} 列表中第一个人的名字是：{{firstPersonName}} 添加添加一个姓王的人添加一个人，名字随机 {{p.name}} import {nanoid} from 'nanoid' export default { name:'Person', data() { return { name:'' } }, computed:{ personList(){ return this.$store.state.personAbout.personList }, sum(){ return this.$store.state.countAbout.sum }, firstPersonName(){ return this.$store.getters['personAbout/firstPersonName'] } }, methods: { add(){ const personObj = {id:nanoid(),name:this.name} this.$store.commit('personAbout/ADD_PERSON',personObj) this.name = '' }, addWang(){ const personObj = {id:nanoid(),name:this.name} this.$store.dispatch('personAbout/addPersonWang',personObj) this.name = '' }, addPersonServer(){ this.$store.dispatch('personAbout/addPersonServer') } }, }

在这里插入图片描述

【本文地址】

公司简介

联系我们