Vuex 모듈화 및 네임스페이스에 대한 예제 코드

이 기사에서는 vuex 모듈화 및 네임스페이스에 대한 예제 코드를 소개합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

Vuex Store는 글로벌하게 등록되어 있기 때문에 비즈니스 상태와 메서드를 분리하는 모듈을 도입하고, 서로 다른 모듈에서 이름 충돌(getter, mutation, actions) 문제를 해결하기 위해 네임스페이스를 도입하는 것은 도움이 되지 않습니다. 모듈을 생성합니다. /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 모듈

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
    }
})

을 삽입하여 런처(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 }
})

페이지 구성 요소(./comComponents/sample.vue)에서

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

를 선언하고 호출합니다. mapMutations, mapGetters, mapActions를 혼합하려면 객체 확장 연산자를 사용하는 것이 좋습니다. 및 mapState를 페이지 구성 요소에 추가하세요. 페이지 구성 요소에 너무 많은 비즈니스 논리와 상태를 섞지 마세요.

createNamespacedHelpers를 통해 네임스페이스에 매핑됩니다.

프로젝트 구조:

├── 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

관련 권장 사항:

What vue 구성 요소입니까? Vue 구성 요소 소개

Vue 하위 구성 요소와 상위 구성 요소 간의 통신(코드 포함)

위 내용은 Vuex 모듈화 및 네임스페이스에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!