郑州网站推广信息,网站开发人员的考核,上海做网站价格,外贸 网站设计前言 学习前端一段时间了#xff0c;因为一直是做Python开发#xff0c;所以凭借着语言的通性学习Javascript、Vue轻快很多#xff0c;但一些碎片化的知识及插件的使用方法还是需要记录一下#xff0c;时而复习#xff0c;形成系统化的知识体系#xff08;PS#xff1a;…前言 学习前端一段时间了因为一直是做Python开发所以凭借着语言的通性学习Javascript、Vue轻快很多但一些碎片化的知识及插件的使用方法还是需要记录一下时而复习形成系统化的知识体系PS主要是年纪大了记不住 一、Vuex是什么
概念专门在Vue中实现集中式状态数据管理的一个Vue插件对Vue应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。 换句话说就是实现了一个东西来统一集中管理这些数据。
二、什么时候使用Vuex
多个组件依赖于同一状态来自不同组件的行为需要变更同一状态
三、Vuex工作原理图 借用尚硅谷张天禹老师的比喻来解释这张图 客人Vue Components去饭店吃饭告诉Dispatch服务员Actions吃什么菜服务员就把要点的菜交给后厨Mutations来加工把做好的菜State给到客人。
四、编码实现
搭建Vuex环境
创建文件src/store/index.js
//引入Vue核心库
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
})
在main.js中创建vm时传入store配置项
......
//引入store
import store from ./store
......//创建vm
new Vue({el:#app,render: h h(App),store
})
基本使用
1.初始化数据、配置actions、配置mutations操作文件store.js
//引入Vue核心库
import Vue from vue
//引入Vuex
import Vuex from vuex
//引用Vuex
Vue.use(Vuex)const actions {//响应组件中加的动作jia(context,value){// console.log(actions中的jia被调用了,miniStore,value)context.commit(JIA,value)},
}const mutations {//执行加JIA(state,value){// console.log(mutations中的JIA被调用了,state,value)state.sum value}
}//初始化数据
const state {sum:0
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})
2.组件中读取vuex中的数据$store.state.sum
3.组件中修改vuex中的数据$store.dispatch(action中的方法名,数据)或 $store.commit(mutations中的方法名,数据) 备注若没有网络请求或其他业务逻辑组件中也可以越过actions即不写dispatch直接编写commit 具体案例
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 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})
Count.vue
templatedivh1当前求和为{{$store.state.sum}}/h1select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字}},methods: {increment(){// commit 是操作 mutationsthis.$store.commit(JIA,this.n)},decrement(){// commit 是操作 mutationsthis.$store.commit(JIAN,this.n)},incrementOdd(){// dispatch 是操作 actionsthis.$store.dispatch(jiaOdd,this.n)},incrementWait(){// dispatch 是操作 actionsthis.$store.dispatch(jiaWait,this.n)},},mounted() {console.log(Count,this)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
