vuex

如图是vuex的模块结构

image.png

使用vuex app.js触发模块action中的toggleSideBar方法：

toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },

用户登出时使用同步语法：

async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }

在模块app.js中，action触发mutations中函数对象的方式：

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
}

函数中为：
var obj = {commit:commit}
var commit= obj.commit
commit('TOGGLE_SIDEBAR')
mutation中：

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  }
}

页面中使用mapstate获取数据：

import {mapState} from 'vuex'

computed: {
    ...mapState({
      sidebar:state=>state.app.sidebar
    })
  },