项目中采用了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'
])
}
}
网友评论