一、this.$nextTick方法
是一个更新视图的方法。在某些时候需要修改数据或dom时不会更新，可以通过this.$nextTick方法实现更新视图更新数据、dom结构。
例：this.$nextTick(function () { console.log('我可以更新视图。') })
二、Vue.set()方法(可用在对象、数组)
是一个更改数据源的数据。动态更改数据，可以添加、修改。如果data中没有改数据源，可以通过Vue.set()实现动态添加修改数据。
例：Vue.set(数据源, 属性名, 值) Vue.set(this.data, 'id', 1)
三、设置代理(在config/index.js)
proxyTable: {
'/api/auth': {target: 'http://www.xxxx.com', changeOrigin: true, secure: false}
}
四、子组件接收父组件数据(props)
子组件 props: {url:{type:Function,required: true}}（接收数据）
satch: { url:{immediate: true, handler: 'handlerFun'} }（监听数据变化，并回调）
五、父组件接收子组件数据(this.$emit('fun', data))
父组件<child @childFun="parentFun" />
parentFun(data) {console.log(data)}
六、vuex状态管理模块的store模式
1.创建store实例(每个应用只包含一次)
const store = new VuexStore({
state: { // 存储状态
todos: ''
},
getters: { // 读取状态信息
doneTodos: state => state.todos
},
mutation: { // 修改状态
set_todos: (state, todosName) => {
state.todos = todosName
}
},
actions: { // 通过函数提交一个mutation
todoFun ({ commit }, todosName) {
return Promise(resolve => {
commit('set_todos', todosName)
resolve()
})
}
}
})
2.使用module模块(store/)
1>index.js
import user from './user'
import getters from './getters'
const store = new Vuex.Store({
modules: {
user
},
getters
})
2>user.js
const user = {
state: { name: '' }, // 状态
mutations: { // 更改状态
set_name: (state, userName) => {
state. name = userName
}
},
actions: { 通过函数更改状态
nameFun ({ commit }, userName) {
return new Promise(resolve => {
commit('set_name', userName)
resolve()
})
}
}
}
export default user
3>getters.js
const getters = { // 读取状态
name: state => state.user.name
}
export default getters
3.在组件(.vue)中使用
1>读取
this.$store.getters.name
2>直接更改状态
this.$store.commit('set_name', '设置状态')
3.>使用函数更改状态
this.$store.dispatch('nameFun', '函数更改状态').then(() => {})
七、路由拦截器(permission.js)
const whiteList = ['/login'] // 免进白名单
router.beforeEach((to, from, nex) => {
console.log(to) // 这个使用较多
console.log(from)
nex()
if (whiteList.indexOf(to.path) !== -1) { next() }
})