烨竹
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
