Vue中路径的选择
在src/router.js下:
在这里插入图片描述
Home组件和login与为同级组件
其中home为默认打开路径
Login和
需要输入路径才能访问到
Home组件中有三个子组件,同样也是需要输入路径才可访问,但前提是在home组件下的路径
此为home.vue组件中的元素结构
在这里插入图片描述
在home组件中导入的全局组件Header和Footer组件,home组件的子组件能共用,但是和home同级的login与*组件不能用home的全局组件,因为他们和home组件不是一家人.
home和Home的子组件可共用css
Element ui是饿了么一套组件库
官网:http://element.eleme.io/#/zh-CN
饿了么公司基于vue开的的vue的Ui组件库
Element Ui 基于vuepc端的UI框架 http://element.eleme.io/#/zh-CN MintUi 基于vue 移动端的ui框架 https://mint-ui.github.io/#!/zh-cn
Vuex小结:

  1. state中的数据,不能直接修改,如果想要修改,必须通过mutations
  2. 如果组件想要直接从state上获取数据:需要this.$store.state.***
  3. 而在实际应用中,还存在着其他一些写法,最常见的有以下三种,但无论怎么写,都需要依赖vue的computed计算属性来实现。
    因为:在vue的实际应用中,computed属性可以在输出前,对data中的值进行改变,因此,我们就是利用computed的这一特性,在组件中获取vuex的state对象中的属性。
    方法一:
    在computed中定义一个方法,并return出state对象中的属性及其状态
    在这里插入图片描述
    但是在比如在商品详情页添加数量时,input输入的时候,使用双向绑定,就会报错
    Computed property “count” was assigned to but it has no setter.
    解决:
    设置set给给方法一个形参:
    在这里插入图片描述
  4. 如果组件,想要获取修改数据,必须使用mutations(注意:如果直接修改state中的值, 在严格模式下会报错)提供的方法,需要通过this.$store.commit('方法的名称’,唯一的一个参数)
    其中方法的名称必须放在mutations属性中
  5. 如果store中的state上的数据,在对外提供的时候,需要左一层包装,那么,推荐使用getters,如果需要使用getters,则用this.$store.getters.***

从vuex中获取到的state要用computed返回,这样才能实时的进行更新
文章参考: vuex–学习笔记(二)在组件中如何获取vuex的state对象中的属性
https://blog.csdn.net/gavincz/article/details/81049461

Logo

前往低代码交流专区

更多推荐