美文网首页
VUE store 获取module 里的state

VUE store 获取module 里的state

作者: 冰落寞成 | 来源:发表于2022-05-20 19:02 被阅读0次

store包的结构如下

1653043522(1).png

index.js 代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user
  }
})

moudle use.js 代码如下:


1653043621(1).png
1653044115(1).png
1653044138(1).png

store 辅助函数使用

mapState 函数

mapState函数写在computed 里面

computed: {
    ...mapState({
      // username: state => state.user.username,
      userId: state => state.user.userId,
      username: state => state.user.username
    })
  },

mapMutations函数

mapMutations写在methods 里

 methods: {
    ...mapMutations(['setToken'])
    }
    handleSetToken(){ //往store 里写入token
      this.setToken()
  }

mapActions函数

mapActions写在methods 里

 methods: {
    ...mapActions(['clearUserInfo'])
    }
    handleClear(){ //清空store
      this.clearUserInfo()
  }

mapGetters函数

mapGetters函数写在computed里

  computed: {
    ...mapGetters([
      'getFirstMenu'
    ])
  }

相关文章

  • VUE store 获取module 里的state

    store包的结构如下 index.js 代码如下: moudle use.js 代码如下: store 辅助函数...

  • vue store 和router

    store 其他组件 更改store中心数据 test.vue组件获取state的数据this.$store.s...

  • Vuex使用介绍(三)

    module Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mut...

  • vuex store笔记

    store/index.js store/module/user.js test.vue

  • Vuex数据管理

    State对象:给Vue Component提供数据状态,this.$store.state.name、...ma...

  • vuex使用方法简述

    下载vuex module分模块开发 将整个store分割成模块module,每个模块有自己的state,muta...

  • vuex实现原理

    思路及流程 vuex是在每个组件上注入this.store获取共享的状态,定义操作state的方法。首先使用vue...

  • vuex--状态管理用法解析

    基本使用 state属性引用 state下的状态,可以在每个vue实例下通过this.$store.state.c...

  • 快速入门Vuex 魔法

    Vuex核心 Store State Mutation Action Module Vuex 的工作流程图 下面我...

  • Vuex--Module

    Vuex可以将store分割成模块(module)。每个模块拥有自己的state、mutation、action、...

网友评论

      本文标题:VUE store 获取module 里的state

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