vuex模块化

最新推荐文章于 2024-10-21 17:26:18 发布

原创最新推荐文章于 2024-10-21 17:26:18 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue.js项目中如何使用Vuex进行模块化的状态管理。当项目包含多个模块如登录和商品模块时，通过Vuex可以有效地组织和共享组件状态。首先，通过npm安装Vuex，然后在src/store目录下创建相应的模块文件，如index.js和login.js。最后，在具体的组件（如login.vue）中引入并使用这些模块。

当项目包含多个模块，例如：登录模块，商品模块等，每个模块中都含有大量需要组件共享的状态，此时就要用到vuex的模块化管理了。

给项目安装vuex

npm install vuex --save

等vuex安装完成，src文件夹下创建store文件夹，store文件夹下是index.js和login.js文件

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import login from './login.js'
Vue.use(Vuex)

export default new Vuex.Store({
    state:{},
    mutations:{},
    getters:{},
    actions:{},
    modules:{
        login
    }
})


//login.js

export default {
    namespaced: true,
    state:{
        users:[
            {
                id:'01',
                name:'Leo'
            },
            {
                id:'02',
                name:'Tom'
            }
        ]
    },
    mutations:{
        addUser(state,payload){
            state.users.push(payload)
        }
    },
    getters:{
        getNameById(state){
            return function(id){
                return state.users.find(user => user.id === id).name
            }
        },
        
        allName(state){
            return state.users.reduce((p,c) => p += `${c.name},`,'').repalce(/^,|,$/g,'')
        }
    },
    actions:{
        addAsyncUser({commit},payload){
            let { user, time } = payload
            setTimeout(() => {
                commit('addUser',user)
            },time)
        }
    }
}

在login.vue中使用

<template>
    <div>
        <span>当前用户：{{ name }}</span><br/>
        <span>所有用户：{{ $store.getters['login/allName'] }}</span>
        <span>id为02的用户：{{ name02 }}</span>
        <span>所有用户：</span>
        <ul>
            <li v-for="item in users" :key="item.id">{{ item.name }}</li>
        </ul>
        <button @click="getNameById">根据id获取用户</button>
        <button @click="addUser">添加用户</button>
        <button @click="addAsyncUser">异步添加用户</button>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default{
    data(){
        return {
            name02:""
        }
    },
    computed:{
        ...mapState({
            name:state => state.login.users[0].name,
            users:state => state.login.users
        })
    },
    methods:{
        getNameById(){
            this.name02 = this.$store.getters['login/getNameById']('02')
        },
        addUser(){
            this.$store.commit('login/addUser',{
                id:nanoid(),
                name:nanoid()
            })
        },
        addAsyncUser(){
            this.$store.dispatch('login/addAsyncUser',{
                user:{
                    id:nanoid(),
                    name:nanoid()
                },
                time:500
            })
        }
    }
}
</script>

好了，这就是vuex模块化管理的简单使用