登录  /  注册
首页 > web前端 > js教程 > 正文

vuex模块化和命名空间的实例代码

不言
发布: 2018-08-07 15:02:22
原创
2594人浏览过

这篇文章给大家介绍的内容是关于vuex模块化和命名空间的实例代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,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)中注册 store 到根组件

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 }
})
登录后复制

页面组件(./components/sample.vue)中声明并调用

<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>
登录后复制

推荐使用对象展开运算符将 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
登录后复制

 相关推荐:

vue组件是什么?Vue组件的的介绍

Vue子组件与父组件之间的通信(附代码)

以上就是vuex模块化和命名空间的实例代码的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号