Example code for vuex modularization and namespaces-JS Tutorial-php.cn

Example code for vuex modularization and namespaces

不言

Release： 2018-08-07 15:02:22

Original

2792 people have browsed it

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 &#39;@/api/sample-api-proxy.js&#39;
import { _AjaxUrl } from &#39;@/store/constants&#39;

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

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

Copy after login

./store/index.js Inject the module

import Vuex from &#39;vuex&#39;
import sample_module from &#39;./modules/sample&#39;
import other_module from &#39;./modules/other&#39;

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

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

Copy after login

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

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

Copy after login

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

<template>
    <div id="container">
    <ul>
        <li v-for="(item, index) in all" :key="index">
            <span>{{item}}</span>
            <button @click="removeItem(index)">删除</button>
        </li>
    </ul>
    <div>{{all2str}}</div>
    </div>
</template>

<style rel="stylesheet/stylus" scoped>
@import &#39;~style/common.styl&#39;
nospace()
    margin 0
    padding 0
height(h)
    height unit(h, &#39;px&#39;)
    line-height unit(h, &#39;px&#39;)

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

<script type="text/ecmascript-6">
import { createNamespacedHelpers, mapState } from &#39;vuex&#39;
const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers(&#39;sample&#39;)
const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers(&#39;other&#39;)

export default{
    data() {
      return {

      }
    },
    computed: {
        ...mapState({
            all : state => state.sample.all
        }),
        ...mapGetters([&#39;all2str&#39;]),
        ...mapOtherGetters([&#39;test&#39;])
    },
    methods: {
        ...mapActions([&#39;loadDataAsync&#39;]),
        ...mapMutations([&#39;removeItem&#39;]),
        ...mapOtherMutations([&#39;testing&#39;])
    },
    created() {
        const pid = this.$route.query.pid
        this.loadDataAsync(keep, pid)
    }
}
</script>

Copy after login

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

Copy after login

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!