美文网首页
62.vuex中的modules中的数据如何在js文件中调用

62.vuex中的modules中的数据如何在js文件中调用

作者: yaoyao妖妖 | 来源:发表于2019-05-30 15:39 被阅读0次

    项目中采用了vuex的modules的方式进行数据的处理,但是在路由的界面我也需要用到vuex中的方法,这个和在vuex中的使用不相同,记录一下

    vuex /store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import auth from './modules/auth'
    import createLogger from 'vuex/dist/logger'
    import createPersistedState from 'vuex-persistedstate'
    Vue.use(Vuex)
    
    // 判断环境 vuex提示生产环境中不使用
    const debug = process.env.NODE_ENV !== 'production'
    const createPersisted = createPersistedState({
      storage: window.sessionStorage
    })
    
    export default new Vuex.Store({
      modules: {
        auth
      },
      strict: debug,
      plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
    })
    
    

    router index.js 在单个js文件中使用

    import Vue from 'vue'
    import Router from 'vue-router'
    import Element from '../pages/element-ui.vue'
    import store from '../store'
    Router.prototype.goBack = function () {
      this.isBack = true
      window.history.go(-1)
    }
    
    Vue.use(Router)
    const router = new Router({
      mode: 'history',
      base: '/vuetemplate/',
    
      routes: [
      ]
    })
    router.beforeEach((to, from, next) => {
      var key = '1'
      // store.dispatch.auth('selectedTabBarIndex', key)
      // store commit/mutations  dispatch/actions
      // 调用的时候需要在方法面前添加具体的modules的名字,auth是文件名字,changeTabbarIndex是这个文件里面的方法
      store.dispatch('auth/changeTabbarIndex', key)
      next()
    })
    export default router
    

    在vue文件中使用

    import { mapState,mapActions } from 'vuex'
    export default {
      computed: {
        ...mapState('auth', ['selectedTabBarIndex', 'isOpenSideBar'])
      },
      methods: {
        ...mapActions('auth', [
          'changeSideBarOpenOrClose'
        ])
      }
    }
    

    相关文章

      网友评论

          本文标题:62.vuex中的modules中的数据如何在js文件中调用

          本文链接:https://www.haomeiwen.com/subject/vfdvtctx.html