vuex

烨竹

参考：https://vuex.vuejs.org/zh/

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

解决什么问题

vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手

文档阅读和自我理解

用例

import Vue from 'vue'
import Vuex from 'vuex'
import io from 'socket.io-client'
import emojiList from '@/assets/js/emoji'
import i18nData from '@/assets/js/i18n'

Vue.use(Vuex)
const rid = process.env.NODE_ENV === 'development' ? 1 : window.RID
// const socket = io(process.env.VUE_APP_SOCKET_URL + rid)
const socket = io('https://socket.heloves.me/?r=' + rid)

const emoji = {
  namespaced: true,
  state: {
    show: false,
    list: emojiList
  },
  mutations: {
    show(state, bool) {
      state.show = bool
    }
  }
}

const user = {
  namespaced: true,
  state: {
    data: {}
  },
  mutations: {
    setData(state, data) {
      Vue.set(state, 'data', data)
    },
    edit(state, [key, value]) {
      Vue.set(state.data, key, value)
    }
  }
}

const userlist = {
  namespaced: true,
  state: {
    users: {}
  },
  getters: {
    count(state) {
      return Object.keys(state.users).length
    }
  },
  mutations: {
    setData(state, data) {
      Vue.set(state, 'users', data)
    },
    update(state, [id, key, value]) {
      if (state.users[id]) {
        Vue.set(state.users[id], key, value)
      }
    },
    addUser(state, user) {
      let id = user.id
      Vue.set(state.users, id, user)
    }
  }
}

const login = {
    namespaced: true,
    state: {
        show: false
  },
  mutations: {
    show(state, bool) {
        state.show = bool
    }
  },
  actions: {
    toSocks(context, {token, user = null}) {
      return new Promise((resolve, reject) => {
        socket.emit('login', {token, user}, (status, desc) => {
          if (status === 1) {
            resolve()
          } else {
            reject(desc)
          }
        })
      })
    }
  }
}

const regist = {
    namespaced: true,
    state: {
        show: false
  },
  mutations: {
    show(state, bool) {
        state.show = bool
    }
  }
}

const withdrawal = {
  namespaced: true,
  state: {
    show: false,
    // toggle the show between form and withdrawal information
    tab: 'form'
  },
  mutations: {
    toggleShow(state, bool) {
      state.show = bool
      // whatever the panel visible or not, set the tab values 'form' by default
      state.tab = 'form'
    },
    toggleTab(state, tab) {
      state.tab = tab
    }
  }
}

const socks = {
  namespaced: true,
  state: {
    messages: [],
    histories: {
      lock: false,
      page: 2,
      text: '加载更多消息'
    },
    connect_status: {
      show: false,
      text: ''
    },
    scroll_lock: false,
    bonus: {},
    groups: {}
  },
  mutations: {
    setMessages(state, data) {
      // for (let i = 0; i < data.length; i++) {
      //   const m = data[i];
      //   let d = new Date(m.createTime).toLocaleDateString()
      //   if (typeof state.groups[d] === 'undefined') {
      //     Vue.set(state.groups, d, [])
      //     state.groups[d].push(m)
      //   } else {
      //     state.groups[d].push(m)
      //   }
      // }
      state.messages = [...data, ...state.messages]
    },
    pushMessage(state, data) {
      state.messages.push(data)
    },
    setHistories(state, data) {
      Object.assign(state.histories, data)
    },
    setScrollLock(state, bool) {
      state.scroll_lock = bool
    },
    updateBonus(state, data) {
      const i = state.messages.findIndex(m => m['_id'] === data['_id'])
      if (i > -1) state.messages[i] = data
    },
    deleteMessages(state, ids) {
      for (let i = 0; i < ids.length; i++) {
        let _id = ids[i]
        let index = state.messages.findIndex(m => m._id === _id)
        if (index > -1) {
          state.messages.splice(index, 1)
        }
      }
        },
        truncateMessage(state) {
            state.messages = []
        }
  },
  actions: {
    sendMessage(context, data) {
      return new Promise((resolve, reject)=>{
        socket.emit('chat', data, (status, desc) => {
            reject(desc)
          if (status === 2) {
          } else {
            resolve(status)
          }
        })
      })
    },
    setTyping(context, status) {
      socket.emit('typing', status)
    },
    getMore({state, commit}) {
      if (state.histories.lock) {
        return
      }
      commit('setHistories', {
        lock: true ,
        text: '正在加载...'
      })
      socket.emit('getmore', {
        query: {},
        page: state.histories.page
      })
      commit('setHistories', {
        page: state.histories.page + 1 
      })
    },
    update(context, data) {
      socket.emit('update', data)
    },
    initialize() {
      return new Promise((resolve, reject) => {
        try {
          socket.emit('initialize', data => {
            resolve(data)
          })
        } catch(e) {
          reject(e.message)
        }
      })
    },
    getBonus(context, _id) {
      return new Promise((resolve, reject) => {
        socket.emit('bonus', _id, (status, content) => {
          if (status === 0) {
            reject(content)
          } else {
            resolve(content)
          }
        })
      })
    },
    withdrawal(context, data) {
      return new Promise((resolve, reject) => {
        socket.emit('withdrawal', data, (status, content) => {
          if (status === 0) {
            reject(content)
          } else {
            resolve(content)
          }
        })
      })
    }
  }
}

const bonus = {
  namespaced: true,
  state: {
    info: {},
    show: false
  },
  mutations: {
    setBonus(state, bonus) {
      Vue.set(state, 'info', bonus)
    },
    toggleShow(state, bool) {
      state.show = bool
    }
  }
}

const i18n = {
  namespaced: true,
  state: i18nData,
  mutations: {
    change(state) {
      if (state.locale === 'cn') {
          state.locale = 'en'
      } else {
          state.locale = 'cn'
      }                             
    }
  }
}


const store = new Vuex.Store({
  modules: {
    user,
    userlist,
    login,
    regist,
    socks,
    emoji,
    bonus,
        withdrawal,
        i18n,
  }
})

socket.on('connect', () => {})

socket.on('notice', notice => {
  switch (notice.type) {
    case 'login':
      if (notice.user && notice.user.id) {
        store.commit('userlist/addUser', notice.user)
      }
      store.commit('userlist/update', [notice.id, 'online', true])
      store.commit('socks/pushMessage', notice)
      break
    case 'disconnect':
      store.commit('userlist/update', [notice.id, 'online', false])
      store.commit('socks/pushMessage', notice)
      break
    case 'update':
      const keys = Object.keys(notice.data)
      keys.forEach(key => {
        store.commit('userlist/update', [notice.id, key, notice.data[key]])
      })
      break
    case 'bonus':
      const {type, uid, bonus, data} = notice
      store.commit('socks/pushMessage', {type, uid, bonus})
      store.commit('socks/updateBonus', data)
      break
    case 'messages-delete':
      store.commit('socks/deleteMessages', notice.ids)
      break
    default:
      break
  }
})

socket.on('chat', data => {
  store.commit('socks/pushMessage', data)
})

socket.on('typing', data => {
  store.commit('userlist/update', [data.id, 'typing', data.status])
})

socket.on('getmore', data => {
  store.commit('socks/setMessages', data.reverse())
  if (data.length >= 20) {
    store.commit('socks/setHistories', {
      lock: false,
      text: '加载更多消息'
    })
  } else {
    store.commit('socks/setHistories', {
      text: '已经没有更多消息了'
    })
  }
})

export default store