vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的模块化使用)

2024-02-14 19:10:52

vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的模块化使用)

请先翻看前两节再看这里的内容：

这个是我 store 文件夹的结构

store 的 index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import modulehome from './Home/index.js'
import modulefriend from './Friend/index.js'
import modulefind from './Find/index.js'
import modulepurse from './Purse/index.js'
import modulemine from './Mine/index.js'


export default new Vuex.Store({
  modules: {
    home: modulehome,
    friend: modulefriend,
    find: modulefind,
    purse: modulepurse,
    mine: modulemine
  }
})

Friend 的 index.js

const state = {
  mine: null, //自己信息
  messageList: [], //消息列表
  friendList: [], //好友列表
  groupList: [] //群组列表
}

const getters = {
  mine: state => state.mine,
  messageList: state => state.messageList,
  friendList: state => state.friendList,
  groupList: state => state.groupList
}

const mutations = {

  mineSet(state, info) {
    state.mine = info
  },


  messageSet(state, info) {
    state.messageList = info
  },
  messageAdd(state, info) {
    state.messageList.push(info)
  },


  friendListSet(state, info) {
    state.friendList = info
  },
  friendListAdd(state, info) {
    state.friendList.push(info)
  },

  groupListSet(state, info) {
    state.groupList = info
  },
  groupListAdd(state, info) {
    state.groupList.push(info)
  },

}

const actions = {
}


export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

因为我们使用了模块的 store 的方式接入因此要加上 export default 中加入了 namespaced: true

其中 getters 和 mutations 定义了些对 state 的读写操作

在 其他 .js 中 使用 store 是要把 store/index.js 引入即可

例如：这个是云通信 .js 中的使用代码很多无用地方可以省略这段直接往下看

// 云通信相关业务 入口
//
//
// 云通信相关业务 入口
import "../../../static/TIM-SDK/webim.js";
import "../../../static/TIM-SDK/json2.js";

import store from '@/store/index';

import IMInterface from "./IM-Interface.js"


import {
  localUser,
  serverConfig,
} from '@/baseLocal.js'

import {
  serverYunxGet
} from '@/utils/HttpHelper.js'

const loginInfo = {
  'sdkAppID': 1400466, //用户所属应用id,必填
  'appIDAt3rd': 1400466, //用户所属应用id，必填
  //'identifier': '616063', //当前用户ID,必须是否字符串类型，选填
  //'identifierNick': "傲娇",//当前用户昵称，选填
  //'userSig': 'eJxlz1FPgzAQwPF3PgXpq8ZdKXTDZA*swaXT6chcpk8ER2ENWhroELL43Y24xCbe6**fu9zZcV0XPT9sb7LDoT4pk5pBC*TeugjQ9R9qLfM0Mylp8n8oei0bkWaFEc2IOAgCD8BuZC6UkYW8FBRToMTyNq-S8cjvAh-Aw4FPqZ3IcsR1nDB*JyO2WXXNG3Dl82pp-LB76hONj-VQi3ixHfrHT70DfnyPZITNapNNFjtdrbnYF2yvWUwUZWbWQnkVD8tJ8nKfvOYnWs7n1kkjP8TlI0pm0ykNQ0s70bSyVmPgAQ6wR*BnkPPlfAOg4lxe' //当前用户身份凭证，必须是字符串类型，选填
  //'headurl': 'img/2016.gif', //当前用户默认头像，选填
  //'accountType': accountType //用户所属应用帐号类型，已废弃
}

const options = {
  'isAccessFormalEnv': true, //是否访问正式环境，默认访问正式，选填
  'isLogOn': true //是否开启控制台打印日志,默认开启，选填
}

function imLogin() {
  //console.log("localUser.userdata:", localUser.userdata)
  serverYunxGet({
    url: "/lives/v1/login?",
    data: {
      account: localUser.account,
      password: localUser.passWordMD5,
      gameid: localUser.userdata.GameID,
      nickname: localUser.userdata.NickName,
      faceurl: serverConfig.serverIco + localUser.userdata.TxImg
    },
    onScuess: function(conetnt) {
      console.log("成功", conetnt)
      if (conetnt.data.code = 200) {

        loginInfo.identifier = localUser.userdata.GameID
        loginInfo.userSig    = conetnt.data.data
        webimLogin()

      }
    },
    onFail: function(error) {
      console.log("云信APPServer失败", error)
    }
  })
}


function webimLogin() {
  //console.log("loginInfo==>",loginInfo)

  //web sdk 登录
  webim.login(loginInfo, IMInterface.listeners, options,
    function(resp) {
      //loginInfo.identifierNick = resp.identifierNick; //设置当前用户昵称
      //identifierNick为登录用户昵称(没有设置时，为帐号)，无登录态时为空
      // webim.Log.warn('webim登录成功,identifierNick:', resp);
      // webim.Log.warn('webim登录成功,loginInfo.identifierNick:', loginInfo.identifierNick);
      //applyJoinBigGroup(avChatRoomId); //加入大群
      //hideDiscussForm(); //隐藏评论表单
      //initEmotionUL(); //初始化表情
      //console.log('webim登录成功,identifierNick:==>', resp);
      //console.log('store==>', store)
      //console.log('store.Friend==>', store.Friend)
      //
      //mine = {
      //   identifier: localUser.userdata.GameID,
      //   identifierNick: resp.identifierNick,
      //   headurl: resp.headurl,
      //}
      //保存 云通信登陆成功 自己数据
      store.commit('friend/mineSet', {
        identifier: localUser.userdata.GameID,
        identifierNick: resp.identifierNick,
        headurl: resp.headurl,
      })

      //console.log("==()==>:", store.state.friend.mine)
      EventBusTIM.emit('webim.login')
    },
    function(err) {
      webim.Log.warn('webim登录失败，', err.ErrorInfo);
      //alert(err.ErrorInfo);
    }
  );
}


function imLogout() {
  //web sdk 登出
  webim.logout(
    function(resp) {

    }
  );
}

export {
  imLogin,
  imLogout
}

***** 可以忽略上面这段这里是直接的赋值与取值的操作

在 .vue 文件中 this.$store.state.friend.mine 使用

在 .js 文件中 store.state.friend.mine 使用 store 已经通过 import store from '@/store/index'; 引入了

//store 是直接通过 import 引入的
//保存 云通信登陆成功 自己数据
store.commit('friend/mineSet', {
     identifier: localUser.userdata.GameID,
     identifierNick: resp.identifierNick,
     headurl: resp.headurl,
})

//读取已经保存好的数据
console.log("==()==>:", store.state.friend.mine)

大家有没有觉得每次都这么使用代码会很冗余

this.$store.state.friend.mine

所以呢 VUE 给大家提供了 mapState ;mapGetters; mapActions; mapMutations 简化了使用步骤

我们这里着重讨论下模块方式下的使用

mapState ;
mapGetters;
mapActions;
mapMutations

在 .vue 脚本中我们将对 friend 模块进行 state 属性的使用 getter 以及 Mutations 操作其他两种操作类似

// 这里使用的是  getter 属性， firend 谁模块名称
computed: {
   ...mapGetters({
        mine: 'friend/mine',
        messageList: 'friend/messageList'
   })
},


///这里是用的是 Mutations 改变 state 内容 friend  同样是模块名称
methods: {
   ...mapMutations({
        mineSet: 'friend/mineSet',
        messageSet: 'friend/messageSet',
        messageAdd: 'friend/messageAdd'
    }),
}

然后就是可以在 .vue template 和 scrpit 中使用了

<template>
    66666 {{mine}}88888
    <p>66666 {{this.$store.state.friend.mine.headurl}} 88888</p>
    <p>{{messageList.length}}</p>
    <p>{{messageList}}</p>
</template>

mounted() {    
   this.messageAdd({
        io: '1111',
        pp: "999"
   })
   console.log("==>messageList1:",this.messageList)
},

就像和 .vue data 中的数据一样使用, this....

码农公寓

vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的 模块化 使用)

相关文章

vuex store使用总结 4 (mapState ;mapGetters; mapActions; mapMutations 的模块化使用)