vue 学习小记

vue 中有 data() 、computed、methods、beforeRouteLeave、created等

具体的:

　　data():定义一些文件中需要用到的变量,data中带return，是使数据只在当前组件中可用，不会影响其他组件，不使用return，会让数据在全局可见，会造成污染

　　computed():用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理，

　　　　　　　　它其实就是定义一些需要通过各种计算处理等得到的数据，data是定义一些初始化的变量

　　methods：里面是放上下文中用到的函数的，比如，点击事件中调用一个函数，这个函数就写在methods里面

　　beforeRouteLeave:离开路由之前执行的函数。

　　created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。在实例创建完成后被立即调用

关于store：

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

　　个人理解:

　　　　　　store主要包括了state、getters、mutations、actions、modules

　　　　　　具体的:                                                                        actions 和mutations都是去改变state中的数据，只是，actions中可以通过调用后端接口异步操作去该变state中的数据，也可以再actions中调用mutations，进行该变state中的值

　　　　state, //类似于定义一些初始化的变量

　　　　getters, //可以对这些变量(state)进行，派生出一些状态，例如对列表进行过滤并计数(一些筛选)

　　　　mutations, //可以对state进行一些更改(用来触发同步操作的方法。)

　　　　actions //可以对state进行一些更改，和mutations相似，(可以进行一些异步操作，可以提交mutations)

 　　　　modules  uex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：这个地方主要是引用其他子store

　　　　

　　mutations和actions 都可以在created中调用，如    this.$store.commit('showFooter'); commit=>mutations,用来触发同步操作的方法。
　　　　　　　　　　　　　　　　　　　　　　　　this.$store.dispatch('getThirdUnitStudent') dispatch =>actions,用来触发异步操作的方法。

　　state, 可以在computed中用， 　　　　　　　如  schoolName(){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　return this.$store.state.info.schoolName
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},

　　　

<template>
<div id="hasopen">
<div id="has" v-if="students.length">
<ul class="list" id="JS-list">
<li v-for="stu in students">
<div class="list_word" v-if="stu.indexCode">{{stu.indexCode}}</div>
<div class="list_li clearfix" v-else>
<img :src="stu.portrait">
<p>{{stu.user_name}}</p>
<i @click="open(stu.user_id,stu.phone_number)" class="icon-duoxuan"></i>
</div>
</li>
</ul>
<br>
<br>
<br>
</div>
<div id="nohas" v-else>
<p>暂无学生</p>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default { //data
data() { //定义的变量
return { //不使用函数return包裹的数据会在项目的全局可见，会造成变量污染
stuId: 0, //使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
classId: this.$route.params.classid,
willShow: false,
phone: '',
platform_id: JSON.parse(localStorage.getItem('platform_id'))
}
}, //computed
computed: { //用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，
students() { //然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
let _classId = this.$route.params.classid; //一个函数就返回一个变量，这些返回的变量是在函数中经过各种计算处理后得到的结果的
let _class = this.$store.state.Class.thirdUnitList[_classId];
let _filters = [];
let _last = '';
if (_class && _class.list instanceof Array) {
_class.list.forEach(_stu => {
let indexCode = _stu.abb.charAt(0).toUpperCase()
if (indexCode !== _last) {
_last = indexCode;
_filters.push({
indexCode
})
}
_filters.push(_stu);
})
}
return _filters;
}
}, //methods
methods: { //里面是放上下文中用到的函数的，比如，点击事件中调用一个函数，这个函数就写在methods里面
open(stuId) { //他在文件中开业这样调用{{ 函数名()}}
// this.willShow = true;
this.stuId = stuId;
},
hideMask() {
this.willShow = false;
},
editStudent() {
this.$router.push('/changestudent/' + this.classId + '/' + this.stuId);
},
},
beforeRouteLeave(to, from, next){ //beforeRouteLeave：离开路由之前执行的函数。
layer.closeAll(); //layer.closeAll: 关闭所有的弹框
next();
},

created(){ //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
try { //在实例创建完成后被立即调用
MobclickAgent.onPageBegin("classes"); //里面可以调用一些方法什么的
} catch (e) {
console.log(e);
}
// this.students();
this.$store.commit('showFooter'); commit=>mutations,用来触发同步操作的方法。
this.$store.dispatch('getThirdUnitStudent') dispatch =>actions,用来触发异步操作的方法。

},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/scss/common/mixin";
</style>