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'
    ])
  }