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

来源：动视网责编：小采时间：2020-11-27 19:32:44

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

vuex模块化和命名空间的实例代码:这篇文章给大家介绍的内容是关于vuex模块化和命名空间的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。因为Vuex Store是全局注册的，不利于较大的项目，引入模块分离业务状态和方法，引入命名空间解决不同模块内（getter

推荐度：

点击下载本文 文档为doc格式

导读vuex模块化和命名空间的实例代码:这篇文章给大家介绍的内容是关于vuex模块化和命名空间的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。因为Vuex Store是全局注册的，不利于较大的项目，引入模块分离业务状态和方法，引入命名空间解决不同模块内（getter

这篇文章给大家介绍的内容是关于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: '<Home/>',
 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 '~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
</style>

<script type="text/ecmascript-6">
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)
 }
}
</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

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

推荐度：

点击下载本文 文档为doc格式

标签：模块实例的实例

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐