vue經常使用的小知識點

1、this.$nextTick方法

    是一個更新視圖的方法。在某些時候須要修改數據或dom時不會更新，能夠經過this.$nextTick方法實現更新視圖更新數據、dom結構。

    例：this.$nextTick(function () { console.log('我能夠更新視圖。') })

2、Vue.set()方法(可用在對象、數組)

    是一個更改數據源的數據。動態更改數據，能夠添加、修改。若是data中沒有改數據源，能夠經過Vue.set()實現動態添加修改數據。

    例：Vue.set(數據源, 屬性名, 值) Vue.set(this.data, 'id', 1)

3、設置代理(在config/index.js)

    proxyTable: {

        '/api/auth': {target: 'http://www.xxxx.com', changeOrigin: true, secure: false}

    }

4、子組件接收父組件數據(props)

    子組件 props: {url:{type:Function,required: true}}（接收數據）

     satch: { url:{immediate: true, handler: 'handlerFun'} }（監聽數據變化，並回調）

5、父組件接收子組件數據(this.$emit('fun', data))

    父組件<child @childFun="parentFun" />

    parentFun(data) {console.log(data)}

6、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(() => {})

7、路由攔截器(permission.js)

    const whiteList = ['/login'] // 免進白名單

    router.beforeEach((to, from, nex) => {

        console.log(to) // 這個使用較多

        console.log(from)

        nex()

        if (whiteList.indexOf(to.path) !== -1) { next() }

    })