vuex最详细笔记总结，这些东西你真的了解吗？

news/2024/11/28 17:55:17/

1.vuex是啥？

简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据

2.什么时候使用vuex

1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态
总之，就是vuex作为一个仓库，任何组件都可以去在这个仓库拿数据，也可以修改这个仓库中的数据。

3.vuex实现原理

在这里插入图片描述
在这里插入图片描述

注意的问题
①State Actions Mutations都是对象数据类型，他们三个都是由store统一管理
②我们要实现在任何组件中都可以调用dispatch，commit这两个api，但是这两个api都是store提供的，所以我们需要所有的组件实例都可以看到store

4.搭建vuex环境

注意：
vue2中要使用vuex的3版本
vue3中要使用vuex的4版本

npm i vuex //安装最新版本
npm i vuex@3  //安装3版本

4.1配置vuex

注意：由于vue-cli的执行机制，mainjs中会先执行import（不管import在mainjs的哪个位置）的内容，然后执行i别的
vue实例中有了store，那么vue组件的实例中也就有了store

					创建store/index.js

//该文件用于创建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, //实际上是 actions:actions 但是重名了 可以简写mutations,state,
})

				main.js中只需要引入store即可

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
})

5.求和案例

5.1不使用vuex

在这里插入图片描述

<template><div><h1>当前求和为：{{sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>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)},},}
</script><style lang="css">button{margin-left: 5px;}
</style>

5.2使用vuex

注意：
①store/index.js中是核心文件，actions中用来响应组件的动作，mustations用来操作数据（state），state用来保存数据
②在actions的函数中接收两个参数，一个是上下文context（他保存着一些actions中要经常使用的信息，如commit，dispatch，state），另外一个是value（比如本案例中的n值）
mutations中的函数也接受两个参数，第一个是state，第二个是value值
③actions中可以用来处理一些逻辑操作，比如本案例中判断sum是偶数还是奇数，然后进行操作；当不需要这些逻辑操作的时候，可以直接在组件中，直接去找mutations，不经过actions
④组件可以调用dispatch来联系actions；组件/actions可以使用commit来联系mutations
⑤actions中的函数常常是小写的；mutations中的函数常常是大写的；res：mutations才是最大的，只有他可以操作数据state
⑥在store/index.js中引入Vue Vuex，在最后暴露的时候，Vuex.Store ,每一个vuex的核心应用就是store（仓库）；在mainjs中引入store（引入new的这个vuex的实例即可）即可；
⑦在vue实例中添加上store这个属性之后，vue实例（vm）和vue组件的实例（vc）上都可以发现$store这个属性

在这里插入图片描述
在这里插入图片描述

						store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions = {    //context上下文 包含我们在actions中要用的全部的信息 如dispatch commit/* jia(context,value){    console.log('actions中的jia被调用了')context.commit('JIA',value)   //这里面写大写JIA 是为了区别actions中的和Mutations中的},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, //实际上是 actions:actions 但是重名了 可以简写mutations,state,
})

							main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
})

					component/Count.vue

<template><div><h1>当前求和为：{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('JIA',this.n)  //由于actions中没有任何逻辑处理，vc直接和Mutations进行对话},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)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

5.3使用vue开发者工具

在这里插入图片描述
从这里可以看出Devtools只会和mutations进行联系

6.store中的其他属性 getters

getters将state中的数据进行加工
在这里插入图片描述

7.mapState、mapGetters

map 是映射的意思，帮我们生成了原来我们手写的计算属性
//借助mapState生成计算属性，从state中读取数据。（对象写法）
…mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’}),
//借助mapState生成计算属性，从state中读取数据。（数组写法）
…mapState([‘sum’,‘school’,‘subject’]), //展开运算符 这里要展开的原因：mapState是对象，computed也是对象，

<template><div><h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>import {mapState,mapGetters} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},computed:{//靠程序员自己亲自去写计算属性/* sum(){return this.$store.state.sum},school(){return this.$store.state.school},subject(){return this.$store.state.subject}, *///借助mapState生成计算属性，从state中读取数据。（对象写法）// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(['sum','school','subject']), //展开运算符 这里要展开的原因：mapState是对象，computed也是对象，//对象里面不能写对象，使用展开运算符之后，相当于将sum school subject这些属性放到了computed这个对象中///* ******************************************************************** *//* bigSum(){return this.$store.getters.bigSum}, *///借助mapGetters生成计算属性，从getters中读取数据。（对象写法）// ...mapGetters({bigSum:'bigSum'})//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters(['bigSum'])},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() {const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})console.log(x)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

8.mapActions、mapMutations

注意：如果mapActions或者mapMutations需要传递参数，那么绑定事件的时候要传递好参数，否则参数是事件对象

<template><div><h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>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)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

9.vuex模块化①

							Count.vue

<template><div><h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3><h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>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)},}
</script><style lang="css">button{margin-left: 5px;}
</style>
					store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//求和相关配置
const countOptions = {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){   //这里拿到的state是自己的state，不是总的statereturn state.sum*10}},}//人员管理相关配置
const personOptions = {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}},
}//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})

10.vuex模块化② 将Count和Person写到单独的文件夹

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

						目录如下

在这里插入图片描述

						main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
})
						APP.vue			

<template><div><Count/><hr><Person/></div>
</template><script>import Count from './components/Count'import Person from './components/Person'export default {name:'App',components:{Count,Person},mounted() {// console.log('App',this)},}
</script>

						Count.vue

<template><div><h1>当前求和为：{{sum}}</h1><h3>当前求和放大10倍为：{{bigSum}}</h3><h3>我在{{school}}，学习{{subject}}</h3><h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>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)},}
</script><style lang="css">button{margin-left: 5px;}
</style>

						Person.vue

<template><div><h1>人员列表</h1><h3 style="color:red">Count组件求和为：{{sum}}</h3><h3>列表中第一个人的名字是：{{firstPersonName}}</h3><input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button><button @click="addWang">添加一个姓王的人</button><button @click="addPersonServer">添加一个人，名字随机</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>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')}},mounted(){console.log(this.$store)}}
</script>

				store/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}
})

					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}},
}

					store/person.js

nanoid是什么以及安装方式

//人员管理相关的配置
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) {//https://api.uixsj.cn/hitokoto/get?type=social这是随机生成语录的api   nanoid 这是随机idaxios.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被调用了', value)state.personList.unshift(value)}},state: {personList: [{ id: '001', name: '张三' }]},getters: {firstPersonName(state) {return state.personList[0].name}},
}

http://www.ppmy.cn/news/105082.html

相关文章

Otsu阈值法原理及实现

Otsu阈值法原理及实现

文章目录 Otsu算法简介Otsu 算法的逻辑源码实现 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; Otsu算法简介 Otsu阈值法发表于1979年&#xff0c;论文为A threshold selection method from gray level histograms,作者是日本东京大学的…
阅读更多...
WEB开发之敏感数据处理（一） - JPA敏感数据自动加解密

WEB开发之敏感数据处理（一） - JPA敏感数据自动加解密

实现原理 JPA提供AttributeConverter接口用于实现数据库和实体之间数据的转换。利用这个特性可以在转换时进行加解密&#xff0c;从而实现自动加解密的功能 定义一个 Converter 定义一个SensitiveConverter 实现JPA的 AttributeConverter<String, String>convertToDat…
阅读更多...
oop练习题

oop练习题

public static void main(String[] args) { // &#xff08;三&#xff09;无返回&#xff0c;有参数的方法&#xff1a; // 设置当前狗的姓名的方法&#xff0c;要求传入狗的新姓名&#xff0c;修改当前姓名。 // 设置当前狗的性别的方法&#xff0c;要求传入狗的新性别&am…
阅读更多...
第三章 JVM内存概述

第三章 JVM内存概述

附录&#xff1a;精选面试题 Q&#xff1a;为什么虚拟机必须保证一个类的Clinit( )方法在多线程的情况下被同步加锁 &#xff1f; A: 因为虚拟机在加载完一个类之后直接把这个类放到本地内存的方法区&#xff08;也叫原空间&#xff09;中了&#xff0c;当其他程序再来调这个类…
阅读更多...
【踩坑】mirai挂机运行经常自动退出怎么办？

【踩坑】mirai挂机运行经常自动退出怎么办？

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 目录 背景介绍 解决思路 实现方法 最终效果 背景介绍 就是说&#xff0c;后台运行了mcl&#xff0c;但经常莫名其妙自动会退出&#xff0c;导致每次都得手动的去服务器上重新启动mcl。而对于自己运行的需要用…
阅读更多...
Java制作520表白代码——爱一个人需要理由吗？

Java制作520表白代码——爱一个人需要理由吗？

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;Java经典程序设计 520表白日&#xff0c;每个人都期待着浪漫的表白&#xff0c;而作为一名热爱编程的程序员&#xff0c;我决定用程序员的方式来向你表达我的爱意。 在2023年5月20日这个特殊的日子里&#xff0c;我要用一段特别的…
阅读更多...
kong网关安装及konga安装

kong网关安装及konga安装

一、kong安装 安装机器地址&#xff1a;192.168.19.50 1、自定义一个docker网络 [rootmin ~]# docker network create kong-net a9bde4e7d16e4838992000cd5612476b238f7a88f95a07c994a9f57be7f64c10查看网络是否创建成功 [rootmin ~]# docker network ls NETWORK ID NA…
阅读更多...
【计算机网络详解】——应用层（学习笔记）

【计算机网络详解】——应用层（学习笔记）

&#x1f4d6; 前言&#xff1a;应用层是计算机网络体系结构的最顶层&#xff0c;是设计和建立计算机网络的最终目的&#xff0c;也是计算机网络中发展最快的部分。在本文中&#xff0c;我们以一些经典的网络应用为例来学习有关网络应用的原理、协议和实现方面的知识。 目录 &a…
阅读更多...
最新文章

Copyright @ 2022~2023