这篇文章主要介绍了浅谈vuex@2.3.0 中的 state 支持函数申明，内容挺不错的，现在分享给大家，也给大家做个参考。
vuex 2.3.0 的发布说明: Modules can now declare state using a function – this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores)
假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如:
import api from '~api'const actions = { async ['get']({commit, rootState: {route: { path }}}, config = {}) { const { data: { code, data } } = await api.post(config.url, config.data) if (code === 1001) commit('receive', data) }}const mutations = { ['receive'](state, data) { state.data = [].concat(data) }, ['modify'](state, payload) { const index = state.data.findIndex(item => item.id === payload.id) if (index > -1) { state.data.splice(index, 1, payload) } }, ['insert'](state, payload) { state.data = [payload].concat(state.data) }, ['remove'](state, id) { const index = state.data.findIndex(item => item.id === id) state.data.splice(index, 1) }}const getters = { ['get'](state) { return state.data }}export const _actions = actionsexport const _mutations = mutationsexport const _getters = gettersexport default { namespaced: true, actions, mutations, getters}登录后复制
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue'import Vuex from 'vuex'import lists from './general/lists'Vue.use(Vuex)export default new Vuex.Store({ namespaced: true, modules: { base: { namespaced: true, modules: { app: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }}, platform: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }}, product: { namespaced: true, modules: { category: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }}, } }, keyword: { namespaced: true, modules: { username: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }}, } }, } }, buzz: { namespaced: true, modules: { shop: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }}, } }})登录后复制
立即学习“前端免费学习笔记（深入）”；
但是 state 却需要每个单独设置, 如果直接设置在lists里, 会导致 state 对象被引用共享
在 vuex@2.3.0 中, 这个问题将不存在
import api from '~api'const actions = { async ['get']({commit, rootState: {route: { path }}}, config = {}) { const { data: { code, data } } = await api.post(config.url, config.data) if (code === 1001) commit('receive', data) }}const mutations = { ['receive'](state, data) { state.data = [].concat(data) }, ['modify'](state, payload) { const index = state.data.findIndex(item => item.id === payload.id) if (index > -1) { state.data.splice(index, 1, payload) } }, ['insert'](state, payload) { state.data = [payload].concat(state.data) }, ['remove'](state, id) { const index = state.data.findIndex(item => item.id === id) state.data.splice(index, 1) }}const getters = { ['get'](state) { return state.data }}export const _actions = actionsexport const _mutations = mutationsexport const _getters = gettersexport default { namespaced: true, state() { return { lists: { data: [], total: 0, current_page: 1 } } }, actions, mutations, getters}登录后复制
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue'import Vuex from 'vuex'import lists from './general/lists'Vue.use(Vuex)export default new Vuex.Store({ namespaced: true, modules: { base: { namespaced: true, modules: { app: lists, platform: lists, product: { namespaced: true, modules: { category: lists, } }, keyword: { namespaced: true, modules: { username: lists, } }, } }, buzz: { namespaced: true, modules: { shop: lists, } }})
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
VUEJS 2.0 子组件访问/调用父组件
关于Vue2 SSR缓存 Api 数据的方法
立即学习“前端免费学习笔记（深入）”；
以上就是关于Vuex@2.3.0 中的 state 支持函数的申明的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747993.html
