Vue中路径的选择、vuex小结
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小结:
- state中的数据,不能直接修改,如果想要修改,必须通过mutations
- 如果组件想要直接从state上获取数据:需要this.$store.state.***
- 而在实际应用中，还存在着其他一些写法，最常见的有以下三种，但无论怎么写，都需要依赖vue的computed计算属性来实现。
因为：在vue的实际应用中，computed属性可以在输出前，对data中的值进行改变，因此，我们就是利用computed的这一特性，在组件中获取vuex的state对象中的属性。
方法一：
在computed中定义一个方法，并return出state对象中的属性及其状态
但是在比如在商品详情页添加数量时,input输入的时候,使用双向绑定,就会报错
Computed property “count” was assigned to but it has no setter.
解决:
设置set给给方法一个形参:
- 如果组件,想要获取修改数据,必须使用mutations(注意:如果直接修改state中的值, 在严格模式下会报错)提供的方法,需要通过this.$store.commit('方法的名称’,唯一的一个参数)
其中方法的名称必须放在mutations属性中 - 如果store中的state上的数据,在对外提供的时候,需要左一层包装,那么,推荐使用getters,如果需要使用getters,则用this.$store.getters.***
从vuex中获取到的state要用computed返回,这样才能实时的进行更新
文章参考: vuex–学习笔记（二）在组件中如何获取vuex的state对象中的属性
http://www.javashuo.com/article/p-sywaeaqa-pn.html