[上海校区] vue——vuex模块化操作

本帖最后由叶夜葉于 2019-8-9 14:16 编辑

[上海前端] vue——vuex模块化操作
转载自：https://blog.csdn.net/YUHUI01/article/details/84206956

当state信息足够庞大时，需要使用模块化把state数据分开管理

1、新建js文件，导出一个对象，对象中包含vuex的参数（state、getters、mutations、actions等），在对象中要包含 namespaced:true 属性，设置带命名空间以进行数据访问。

[JavaScript] 纯文本查看 复制代码

export default{

    namespaced:true,//带命名空间

    state:{

        users:''

    },

    getters:{

        users(state){

            return state.users

        }

    },

    mutations:{

        changeUsers(state,payload){

            state.users=payload

        }

    },

    actions:{

        CHANHE_USERS({commit},payload){

            commit('changeUsers',payload)

        }

    }

}

2、把子模块的js文件导入到vuex的js主文件（假设为index.js）中，在index.js文件中导入模块文件，其中对模块文件的命名作为createNamespacedHelpers 的访问入口，在vuex对象中添加modules对象，在modules中注册子模块

[JavaScript] 纯文本查看 复制代码

import Vue from 'vue'
import Vuex from 'vuex'
import rules from './modules/rules'
import users from './modules/users'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
//注册vuex模块
    modules:{
        rules,
        users
    }
})

3、在vue文件中访问

[JavaScript] 纯文本查看 复制代码

import {mapActions,mapGetters,createNamespacedHelpers} from 'vuex'

//使用createNamespacedHelpers 需要在模块中添加namespaced:true属性，其中参数的js文件导入时的模块名

const users=createNamespacedHelpers('users')

const rules=createNamespacedHelpers('rules')

    export default {

        methods:{

            ...mapActions(['CHUANGE_NUM']),

            // ...users.mapActions()

        },

        computed:{

            ...mapGetters(['c','d']),

            ...users.mapGetters(['users']),

            ...rules.mapGetters(['admin'])

        }

    }

帐号		自动登录	找回密码
密码			加入黑马

[上海校区] vue——vuex模块化操作

0 个回复