Example code for vuex modularization and namespaces

This article introduces to you the example code about vuex modularization and namespace. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Because Vuex Store is registered globally, it is not conducive to larger projects. Introduce modules to separate business states and methods, and introduce namespaces to solve the problem of name conflicts in different modules (getters, mutations, actions)

First create a module./store/modules/sample.js

import SampleAPI from '@/api/sample-api-proxy.js'
import { _AjaxUrl } from '@/store/constants'

const state = {
    all: []
}
const mutations = {
    resolve (state, payload) {
        for (let item of payload) {
            state.all.push(item)
        }
    }
}
const getters = {
    allstr (state) {
        return state.join(',')
    }
}
const actions = {
    async init ({commit,state}, pid) {
        await SampleAPI.get(_AjaxUrl + '/api/game/all', params: {pid}).then((res) => {
            state.all = res.all
            commit('resolve', res.data)
        })
    }
}

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

./store/index.js Inject the module

import Vuex from 'vuex'
import sample_module from './modules/sample'
import other_module from './modules/other'

export default new Vuex.Store({
    //全局Store对象
    mutations,
    actions,
    state,

    //模块
    modules: {         
        sample: sample_module,
        other: other_module
    }
})

Register the store to the root component in the startup program (main.js)

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

Vue.use(Vuex)
new Vue({
    el: '#app',
    data() {
        return { rootParam: 'test' }
    },
    store,
    router,
    template: &#39;<Home/>&#39;,
    components: { Home }
})

Page component (./ components/sample.vue) and call

d477f9ce7bf77f53fbcf36bec1b69b7a
    e0e6b80c2b871989cf94b51f0a97caf2
    ff6d136ddc5fdfeffaf53ff6ee95f185
        812dff9318af9b7948efb4895c16189e
            45a2772a6b6107b401db3c9b82c049c2{{item}}54bdf357c58b8a65c66d7c19c8e4d114
            577c8aaa514dd152173aa604081ed818删除65281c5ac262bf6d81768915a4a77ac0
        bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    dc6dce4a544fdca2df29d5ac0ea9906b{{all2str}}16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

53715f61b05ece25dda41380dffc42d7
@import '~style/common.styl'
nospace()
    margin 0
    padding 0
height(h)
    height unit(h, 'px')
    line-height unit(h, 'px')

.sample-ul
    list-style-type none
    @nospace
    li
        display block
        height(20)
    &:hover
        background-color #fcc
531ac245ce3e4fe3d50054a55f265927

5d85af4682789b26597d1a5619846b60
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers('sample')
const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers('other')

export default{
    data() {
      return {

      }
    },
    computed: {
        ...mapState({
            all : state => state.sample.all
        }),
        ...mapGetters(['all2str']),
        ...mapOtherGetters(['test'])
    },
    methods: {
        ...mapActions(['loadDataAsync']),
        ...mapMutations(['removeItem']),
        ...mapOtherMutations(['testing'])
    },
    created() {
        const pid = this.$route.query.pid
        this.loadDataAsync(keep, pid)
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

It is recommended to use the object expansion operator to mix mapMutations, mapGetters, mapActions, and mapState into page components. The page only Used for interactive experience, do not mix too much business logic and status
Map to namespace through createNamespacedHelpers

Project structure:

├── index.html
├── main.js
├── api
│   ├── sample-api-proxy.js
│   └── ...
├── components
│   ├── sample.vue
│   └── ...
└── store
    ├── index.js
    ├── actions.js
    ├── mutations.js
    ├── state.js
    └── modules
        ├── sample.js
        └── other.js

Related recommendations:

What are vue components? Introduction to Vue components

Communication between Vue child components and parent components (with code)

The above is the detailed content of Example code for vuex modularization and namespaces. For more information, please follow other related articles on the PHP Chinese website!