免费网站模板网站,深圳市建设工程交易中心网站,flask和wordpress,怎样做网络推广效果好文章目录 8.1理解 vuex8.1.1vuex 是什么8.1.2什么时候使用 Vuex8.1.3全局事件总线和vuex的区别8.1.5vuex的工作原理图举例#xff1a;讲解原理图#xff0c;以求和案例的下拉框选择2#xff0c;点击后的变化流程讲解 8.2安装vuex8.3搭建vuex环境完整代码 8.4四个map方法的使… 文章目录 8.1理解 vuex8.1.1vuex 是什么8.1.2什么时候使用 Vuex8.1.3全局事件总线和vuex的区别8.1.5vuex的工作原理图举例讲解原理图以求和案例的下拉框选择2点击后的变化流程讲解 8.2安装vuex8.3搭建vuex环境完整代码 8.4四个map方法的使用8.4.1讲解生成代码函数mapState和mapGetters8.4.2讲解生成代码函数mapMutations与mapActions 8.5模块化名命空间本人其他相关文章链接 8.1理解 vuex
8.1.1vuex 是什么 概念专门在 Vue 中实现集中式状态数据管理的一个 Vue 插件对 vue 应 用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方 式且适用于任意组件间通信。 Github 地址: https://github.com/vuejs/vuex
注意点1浏览器安装的Vue插件实际是vuevuex的插件。
8.1.2什么时候使用 Vuex
多个组件依赖于同一状态来自不同组件的行为需要变更同一状态
8.1.3全局事件总线和vuex的区别
全局事件总线查询和修改共享数据需要使用多次$emit$on非常不方便。 而vuex则是把共享数据单独提出来放在vuex中通过双向箭头也就是提供的api就能实现查询和修改数据。
8.1.5vuex的工作原理图 举例讲解原理图以求和案例的下拉框选择2点击后的变化流程讲解 求和案例页面效果长这样 注意点1vuex有3个组成部分Actions、Mutations、State且都是{}对象。 其中 Actions代表一堆动作或者一堆行为 Mutations代表一堆加工或者一堆维护 State代表状态状态就等同于数据。 我们常说把数据交给vuex管理实际是交给vuex的state对象去管理。
注意点2 问题有没有一种感觉Actions有点多余它也不干啥直接把处理转给Mutations做处理 答案Actions不多余如果dispatch只传递行为而没传递值的情况下Actions可以请求Backend API(ajax调后端接口返回值)再去拼接完成请求行为表达式。举例dispatch(‘jia’) 调用Backend API返回2 拼接成dispatch(‘jia’, 2)传递给commit
注意点3针对注意点2如果在传入Actions之前我已经知道行为和参数值那么可以省略Actions这条线步骤直接实现从Vue Components - Mutations
注意点4这个图有1个隐藏点没标出来就是Actions、Mutations、State都得由一个叫store的人去管理他们三个才行。大白话讲这3个对象都准备好都是不能直接使用的必须由一个叫store的去管理他们后才能正常使用。
注意点5这个dispatch方法和commit方法不是由window提供的而是由store提供的。
注意点6要想让所有组件都能使用dispatch方法和commit方法那么你得让所有vc都能认识store才行。
注意点7举例案例描述下整体执行流程初始化state对象中num:0 》 绿色框组件下拉框选择2并点击号按钮后 》 调dispatch的api函数需传入两个参数参数1为动作类型参数2为值即dispatch(‘jia’, 2) 》 jia的动作和值就来到了黄色框Actions对象中会引起Actions对象中key为jia的函数调用jia函数内部自己去触发commit去调用 》 提交commit(‘jia’, 2)后就进入红色框Mutations里了 》 Mutations里肯定也存在个key为jia 的函数这个函数会拿到两个东西第1个东西为state第2个东西为你传过来的2 》走Mutate这条线进行加工修改的意思 》 对紫色框state保存的sum值进行修改 》走Render这条线vuex会帮你重新解析绿色框组件并渲染 》于是乎发现页面中sum就变成修改后的值了。 用大白话举例再讲解下上方的图其中绿色框为客人黄色框为服务员红色框为后厨团队紫色框为你吃到这口菜然后客人进门了张嘴说话就是dispatch的api调用说我要一份蛋炒饭然后黄色框服务员就用点餐宝就是commit去点餐交给红色框后厨团队然后后厨团队把菜加工做好传递给绿色框客人使用。
注意点8Devtools为vux官方提供的开发者调试工具它跟Mutations进行对话。
注意点9Actions有一系列方法不只有commit方法。
8.2安装vuex 命令npm i vuex3 注意
8.3搭建vuex环境
注意点0 项目使用vuex只需建立store文件夹再新建文件叫index.js即可
注意点1 问题如下如图1代码执行报错如图2感觉是说加载顺序不对报错显示创建实例之前先使用Vue.use(Vuex)然后改成如图3的代码发现还是报相同错。 答案报错跟脚手架加载import的顺序有关详情请看注意点2。解决方案就是把引入vuex和引入store和使用Vue.use(Vuex)全部放在index.js文件中这样就能确保加载顺序一致。
图1 图2 图3 注意点2注意inport的扫描顺序会影响加载或打印顺序 比如图1加载打印顺序其中test1和test2都是简单打印语句按理说执行顺序打印应该顺序打印而实际结果如图2先打印import的再会去打印console的100200 问题为啥加载顺序不按照顺序加载 答案在vue-cli脚手架使用import的时候不管import之间有多少代码它会扫描整个import语句然后按照编写代码顺序全都汇总到最上方也就是表面代码写成图1实际执行的代码如图3。
图1 图2 图3 注意点3 new实例的时候可以使用简写方式 完整方式 export default new Vuex.Store({actions: actions,mutations: mutations,state: state,
})简写方式 export default new Vuex.Store({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}
})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,mutations,state,
})8.4四个map方法的使用
8.4.1讲解生成代码函数mapState和mapGetters 注意点1 问题mapState干啥的 答案用来生成重复代码的比如return this.$store.state.xxxx这段就非常重复无法复用。其中mapState采用{K:V}形式K为计算属性名或者方法名V为属性名
sum(){return this.$store.state.sum
},
school(){return this.$store.state.school
},
subject(){return this.$store.state.subject
},
---------------------------------------------------------------------------------
等同于
mounted() {const x mapState({he:sum,xuexiao:school,xueke:subject})console.log(x)
}打印结果 注意点2 问题computed计算属性如何添加mapState 答案不能把mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})直接放上去会报错为啥因为mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})返回的是一个{}对象如果想使用请使用ES6的语法语法…mapState({})其中…的作用是把mapState中的{}中的每一组展开放在computed计算属性中
computed:{...mapState({he:sum,xuexiao:school,xueke:subject})
}8.4.2讲解生成代码函数mapMutations与mapActions 注意点1 使用mapMutations与mapActions若需要传递参数必须在绑定事件时就传参 比如调用加的函数increment使用原方法功能没问题但是如果写成简写形式就会报错如图错误原因就是绑定事件不传参默认传递的时$event的触发事件因为原方法知道把传参n传递过去而简写方式并不知道传啥过去就会默认把$event对象传递过去。
button clickincrement/button//原方法需要传递参数n
increment(){this.$store.commit(JIA,this.n)
}//简写方法
...mapMutations({increment:JIA,decrement:JIAN}),解决方案绑定事件时就传参就行了
button clickincrement(n)/button8.5模块化名命空间 注意点1 问题模块化指的是啥 答案就是一系列功能写到同一个模块代码中比如Count计数相关的属性和方法统一定义在store.js中的const CountAbout中这样做的好处是修改哪部分模块功能就去精确修改即可而非模块化之前是吧所有业务所有属性和方法全部写在store.js中这样太乱且不容易维护。
注意点2 问题名命空间体现在哪里 答案就是在模块化定义时使用关键字namespacedtrue进行标识标识后使用会更加方便。
本人其他相关文章链接
1.《进阶篇第8章vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化名命空间 2.vue2知识点理解vuex、安装vuex、搭建vuex环境 3.vue2知识点vuex中四个map方法的使用 4.vue2知识点模块化名命空间
