2018年3月问题总结

vuex挂载store

项目：《自学vuex》
参照链接：<https://www.cnblogs.com/ghostwu/p/7521097.html>
时间： 2018年3月23日
问题：引用store中state的状态userName 提示错误 “cannot read property 'state' of undefined（不能读取undefined上的state属性）”
分析：引用时使用this.$store.state.userName，此处错误表明store未定义，原因是未在创建vue实例时将store挂载上去
关键代码:
new Vue({
  el: 'App',
  router,
  store,
  components: { App },
  template: '<App/>'
})

页面上显示的vue文件都要引入到app.vue中并实例化

项目：《自学vuex》
时间： 2018年3月26日
问题：使用vuex的mapState辅助函数帮助一个组件获取多个状态时，页面不生效
分析：在.vue文件中添加了其他的元素页面也不显示，猜测可能是页面中没有添加成功.vue单文件组件，在App.vue中并未对mapState.vue文件做引入以及实例化
关键代码:
<template>
  <div id="app">
    <Mainc></Mainc>
    <testc></testc>
    <mapTest></mapTest>
  </div>
</template>

<script>
import mapTest from './components/mapStateTest.vue'

export default {
  name: 'App',
  components: [
    Mainc,
    testc,
    mapTest
  ]
}
</script>

挂载vue实例到页面中

项目：《华智数联-拟定方案》
时间： 2018年3月29日
问题：在新写的模态框里使用v-show命令不起作用，切换状态，绑定事件等均无反应
分析：模态框不能隐藏，但使用display:none可以，可见是js与html出了问题，经过查看，发现js并无问题，查看html结构，发现此处我把新写的模态框放在了id=app的盒子之外,而vue实例是挂载在了此div上
关键代码：
new Vue ({
  el: 'app',
  data： {}
})

未知数子元素等分剩余空间不能用flex:1

项目：《华智数联-拟定方案》
时间： 2018年3月28日
问题：列表里省市都是循环出来的，但想每行只有5个，记得使用flex：1是等分空间的，但不记得5份如何定义属性
分析：flex:1是已知子元素有几个，才可以等分剩余空间的，并没有属性能够定义未知子元素的父元素的属性，此处可将每个子元素宽度设置为20%