zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

对应 store

// 原始数据格式 
const moduleState = { 
    data1: {}, 
    data2: {}, 
} 
 
export default { 
    namespaced: true, 
    state: { 
        api, 
        storePath: 'root/first/second', // 等等, storePath 为必须字段 
        ...moduleState, 
        /**@author zwei 
        * 初始数据函数 
        * @return 原始数据 
        */ 
        initState() { 
            return moduleState 
        } 
    }, 
} 

相关 .vue 文件

export default { 
    mixins: [mixin], // 引入上面的 mixin 
    data: { 
        routerObj: {}, // 路由页面参数 
    }, 
    computed: {
        ...Vuex.mapState('root/first/second', ['storePath']), // 必须引入 storePath 
    }, 
} 

根 store

/**@author zwei 
* 根据路径递归获取当前销毁页面的 state 
* @param {Object} state 递归当前的 state 
* @param {Array} storePaths 递归当前的路径拆分数组 
* @return 返回当前销毁页面的 state 
*/ 
const getRealState = (state, storePaths) => { 
    if(storePaths.length > 0) { 
        let currentState = state[storePaths[0]] 
        return getRealState(currentState, storePaths.slice(1)) 
    } 
    else { 
        return state 
    } 
} 
 
new Vuex.Store({ 
    mutations: { 
        /**@author zwei 
        * 重置当前销毁页面的 state 
        * @param {Object} state 根 state 
        * @param {Object} payload 含有关键的路径参数 storePath 
        */ 
        resetStates(state, payload) { 
            let storePaths = payload.storePath.split('/') 
            let realState = getRealState(state, storePaths) 
 
            if(realState.initState && typeof realState.initState === 'function') { 
                let initState = realState.initState() 
                for (const key in initState) { 
                    if (initState.hasOwnProperty(key)) { 
                        realState[key] = initState[key]; 
                    } 
                } 
            } 
        } 
    }, 
})

根 mixin

export default { 
    data() { 
        return { 
            transitionName: '' 
        } 
    }, 
    watch: { 
        '$route': { 
            handler: 'handleRoute' 
        } 
    }, 
    methods: { 
        ...Vuex.mapMutations(['resetStates']), // 注册根 mutation 
        /**@author zwei 
        * 路由切换动画控制 
        * @param {Object} to 前往的路由 
        * @param {Object} from 之前的路由 
        */ 
        handleRoute(to, from) { 
            const toDepth = to.path.split('/').length 
            const fromDepth = from.path.split('/').length 
            if (to.path === '/') this.transitionName = 'pop' 
            else if (from.path === '/') this.transitionName = 'push' 
            else { 
                console.log('to' + toDepth) 
                console.log('from' + fromDepth) 
                if (toDepth > fromDepth) this.transitionName = 'push' 
                else if (toDepth === fromDepth) this.transitionName = '' 
                else this.transitionName = 'pop' 
            } 
        } 
    }, 
    /**@author zwei 
    * 页面销毁前执行清理 state 事件 
    */ 
    beforeDestroy() { 
        this.resetStates({ 
            storePath: this.storePath 
        }) 
    } 
}