一、nextTick
1、是什么:在Vue中,下一次DOM更新结束后执行其指定的回调的API
2、为什么:由于Vue在数据驱动视图更新时,并不都是每次一改变数据就马上更新视图,因 此改变数据后,如果要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行这些操作。
3、语法:this.$nextTick(回调函数)
二、Vuex
1. 创建vuex的实例对象store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
2. state
Vuex单一状态树下
组件中读取state:
(1)访问$store对象读取state中的count:$store.state.count
(2)通过mapState映射到组件的computed中,便可直接当做组件的计算属性使用:
computed: {
// 对象写法
...mapState({sum: 'sum', school: 'school', subject: 'subject'}),
// 数组写法
...mapState(['sum', 'school', 'subject'])
// 这两种方法等同于(或者叫映射为)
sum() {
return this.$store.sum
},
school() {
return this.$store.school
},
subject() {
return this.$store.subject
}
}
组件中修改state中的数据:
(1) 先发送给actions:$store.dispatch(&#