1.Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
1 const store = new Vuex.Store({2 state: {3 count: 04 },5 mutations: {6 increment (state) {7 state.count++8 }9 }
10 })
11
12 store.commit('increment')
13
14 console.log(store.state.count)
api：https://vuex.vuejs.org/zh/guide/getters.html
2.
...mapGetters
...是ES6的扩展运算符，表示不定个数。
应用：
1 const [first, ...rest] = [1, 2, 3, 4, 5];
2 first // 1
3 rest // [2, 3, 4, 5]
4 const [first, ...rest] = [];
5 first // undefined
6 rest // []:
7 const [first, ...rest] = ["foo"];
8 first // "foo"
9 rest // []
详参
https://hao5743.github.io/2017/02/17/es6%20%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%20%E4%B8%89%E4%B8%AA%E7%82%B9%EF%BC%88...%EF%BC%89/
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
1 mapGetters({
2 // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
3 doneCount: 'doneTodosCount'
4 })
3.vue的ref属性
<div class="menu" ref="menuBorder">
就可以将class为menu的dom属性集合，即menuBorder挂载到this.refs上，通过this.refs.menuBorder就可以访问了
类似DOM选择器的效果
示例：
js：
export default {data() {return {menuList: [{name: '一级目录',children: [{name: '二级目录',children: [{name: '三级目录',children: ['内容']},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]},{name: '二级目录',children: [{name: '三级目录',children: ['内容']}]}]}],}]};},methods:{moveArrow:function (e) {console.log($(e.target).offset().top)let parentTop=this.$refs.menuBorder.offsetTop;var top = $(e.target).offset().top - parentTop;$('.arrow').css('top', top );}}
};
html：
1 <style src="./example.less" lang="less" scoped></style>2 <template>3 <div class="menu">4 <div>5 <div class="side-bar">6 </div>7 <ul class="catalog-list" >8 <li class="level1" v-for="firstLevel in menuList">9 <em class="circle-pointer"></em>
10 <a href="#" class="title-link">{{firstLevel.name}}</a>
11 <ul v-if="firstLevel.children.length>0">
12 <li class="level2" v-for="secondLevel in firstLevel.children">
13 <em class="pointer"></em>
14 <a href="#" class="title-link">{{secondLevel.name}}</a>
15
16 <ul v-if="secondLevel.children.length>0">
17 <li class="level3"
18 @click="moveArrow"
19 v-for="thirdLevel in secondLevel.children">
20 <a :href="'#item_'+thirdLevel.id" class="title-link">{{thirdLevel.name}}</a>
21 </li>
22 </ul>
23 </li>
24 </ul>
25 </li>
26 <li class="last"> <em class="circle-pointer"></em></li>
27 <a class="arrow" href="javascript:void(0);"></a>
28 </ul>
29
30 </div>
31
32 </div>
33 </template>
34 <script src="./example.js"></script>
效果：
4.
