vue项目数据可视化处理

store分布结构图：( ./mutation-types/reset_password )目录

1.mutations.js

空

2.mutation-types.js

     export * from './mutation-types/pay_online' 
     export * from './mutation-types/collection_health' 
     export * from './mutation-types/reset_password'

3. index.js

    import Vue from 'vue' 
    import Vuex from 'vuex' 
    import example from '@/store/modules/example' 
    import collection_health from '@/store/modules/collection_health' 
    import reset_password from '@/store/modules/reset_password'
    Vue.use(Vuex)

    // 线上缴费store同步到本地插件
    const payOnlineStoreToLocal = store => {
      store.subscribe((mutation, state) => {
        // 存储到sessionStorage
        if (mutation.type.startsWith('PO_')) {
          try {
            const { pay_online } = state
            console.log('pay_online', pay_online)
            sessionStorage.setItem('$_pay_online', JSON.stringify(pay_online))
          } catch (e) {
            console.log('sessionStorage write error')
          }
        }else if(mutation.type.startsWith('RE_')) {
          try {
            const { reset_password } = state
            console.log('reset_password', reset_password)
            sessionStorage.setItem('$_reset_password', JSON.stringify(reset_password))
          } catch (e) {
            console.log('sessionStorage write error')
          }
        }
      })
    }

    export default new Vuex.Store({ 
        state: { 
            token: '', 
        },
        mutations: {}, 
        actions: {}, 
        modules: { 
            example, pay_online, 
            collection_health, 
            reset_password 
        }, 
        plugins: [ payOnlineStoreToLocal ] 
    })

4. modules里面的modules

    const pay_online = JSON.parse(sessionStorage.getItem('$_pay_online')) || null
    const state = { } 
    const actions = { }
    const mutations = { } 
    export default { 
        state, 
        actions,
        mutations 
    }