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

项目中采用了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文件中调用)