vuex#mapState JavaScript Examples

The following examples show how to use vuex#mapState. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ServerMixin.js    From fio-registrations with MIT License 6 votes vote down vote up 
export default function(variable, initialState = {}) {
  return {
    beforeCreate() {
      this.$store.dispatch('Server/init', {
        key: variable, data: initialState
      })
    },

    computed: {
      ...mapState({
        [variable]: function(state) {
          return state.Server[variable]
        },
      }),
    },

    beforeDestroy() {
      this.$store.dispatch('Server/reset', {key: variable})
    },
  }
}
Example #2
Source File: app-mixin.js    From ant-design-vue-pro-template with MIT License 6 votes vote down vote up 
baseMixin = {
  computed: {
    ...mapState({
      layout: state => state.app.layout,
      theme: state => state.app.theme,
      primaryColor: state => state.app.color,
      colorWeak: state => state.app.weak,
      fixedHeader: state => state.app.fixedHeader,
      fixedSidebar: state => state.app.fixedSidebar,
      contentWidth: state => state.app.contentWidth,
      autoHideHeader: state => state.app.autoHideHeader,

      isMobile: state => state.app.isMobile,
      sideCollapsed: state => state.app.sideCollapsed,
      multiTab: state => state.app.multiTab,
    }),
    isTopMenu () {
      return this.layout === 'topmenu'
    },
  },
  methods: {
    isSideMenu () {
      return !this.isTopMenu
    },
  },
}
Example #3
Source File: i18n-mixin.js    From ant-design-vue-pro-template with MIT License 6 votes vote down vote up 
i18nMixin = {
  computed: {
    ...mapState({
      currentLang: state => state.app.lang,
    }),
  },
  methods: {
    setLang (lang) {
      this.$store.dispatch('setLang', lang)
    },
  },
}
Example #4
Source File: mixin.js    From vue-antdesign-admin-template with MIT License 6 votes vote down vote up 
mixin = {
  computed: {
    ...mapState({
      layoutMode: (state) => state.app.layout, //整体风格设置
      navTheme: (state) => state.app.theme, //主题色
      primaryColor: (state) => state.app.color, //默认主题色
      colorWeak: (state) => state.app.weak, //色盲模式
      fixedHeader: (state) => state.app.fixedHeader, //固定header
      fixSiderbar: (state) => state.app.fixSiderbar, //固定左侧菜单栏
      contentWidth: (state) => state.app.contentWidth, //内容区布局： 流式 |  固定
      autoHideHeader: (state) => state.app.autoHideHeader, //向下滚动时，是否隐藏 Header
      sidebarOpened: (state) => state.app.sidebar,
      multiTab: (state) => state.app.multiTab, //是否开启顶部标签
    }),
  },
  methods: {
    isTopMenu() {
      return this.layoutMode === 'topmenu'
    },
    isSideMenu() {
      return !this.isTopMenu()
    },
  },
}
Example #5
Source File: mixin.js    From vue-antdesign-admin-template with MIT License 6 votes vote down vote up 
mixinDevice = {
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  methods: {
    isMobile() {
      return this.device === DEVICE_TYPE.MOBILE
    },
    isDesktop() {
      return this.device === DEVICE_TYPE.DESKTOP
    },
    isTablet() {
      return this.device === DEVICE_TYPE.TABLET
    },
  },
}
Example #6
Source File: device-mixin.js    From ant-design-vue-pro-template with MIT License 5 votes vote down vote up 
deviceMixin = {
  computed: {
    ...mapState({
      isMobile: state => state.app.isMobile,
    }),
  },
}