vuex store 分模块化

2022-04-24 17:35:35 阅读：178 来源： 互联网

标签：const 模块化 value state user demo vuex store

store分模块代码如下所示：

代码结构下图所示

//  user.js 模块

const user = {
    state: {
        demo: '我是XX用户'
    },

    //同步 this.$store.commit('方法名'); 来调用
    mutations: {
        setDemo(state, value) {
            state.demo = value + " 触发demo";
        },
        setDemo1(state, value) {
            state.demo = value + " 触发demo1";
        }
    },
    //异步 this.$store.dispatch('方法名'); 来调用
    actions: {
        //this.$store.dispatch('setName');
        setName(content) {
            console.log("走这里了setName")
            content.commit('setDemo', "");
        },
        // 这里使用了异步
        setName1(content, value) {
            console.log("走这里了setName1")
            content.commit('setDemo1', value);
        }
    }
};
export default user;

//  getters.js

 const getters = { demo: state => state.user.demo } export default getters;

//  index.js


import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)


//module文件夹下太多文件，导入太麻烦，使用context实现模块化导入
const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

const store = new Vuex.Store({
    modules,
    getters
})
export default store

// main.js中引入

import App from './App.vue'

import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
import store from './store/index'  // 引入
//把vuex定义成全局组件
Vue.prototype.$store = store　　  // 挂载
const app = new Vue({
    ...App,
    store   // 挂载
})
app.$mount()

// 页面测试用例代码

<template>
    <viw>
        <view class="content">sotre 测试</view>

        <view>{{ this.$store.state.user.demo }}</view>
        <button @click="test" style="width: 90%;">点我【commit提交】</button>

        <button @click="test2" style="width: 90%;margin-top: 30px;">点我【dispatch提交】</button>
    </viw>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
    data() {
        return {
            title: 'Hello'
        };
    },
    computed: mapState(['user']), // 这里是引用user模块
    mounted() {
        console.log(this.$store.getters.demo);
        console.log('我是doemo2:' + this.$store.state.user.demo);
    },
    onl oad() {},
    methods: {
        ...mapMutations(['setDemo']),
        ...mapActions(['setName']),
        test() {
            this.$store.commit('setDemo', '大王加我来巡山-01');
        },
        test2() {
            //this.$store.dispatch('setName');
            this.$store.dispatch('setName1', '大王加我来巡山-02');
        }
    }
};
</script>

标签：const,模块化,value,state,user,demo,vuex,store
来源： https://www.cnblogs.com/louby/p/16186759.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex store 分模块化