标签：friend mine js mapState state mapActions import vuex store

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

vuex store使用总结 1 ( 简单使用 )

vuex store使用总结 2 ( 功能化的使用 )

vuex store使用总结 3 (模块化的使用 )

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

这个是我 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....  

标签：friend,mine,js,mapState,state,mapActions,import,vuex,store
来源： https://blog.csdn.net/nicepainkiller/article/details/97145586

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。