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: '<Home/>', components: { Home } })
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 '~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>
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!