Vuex的使用经验

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。如果你需要构建一个中大型单页应用,Vuex将成为一个很好的选择。

在中大型单页应用项目中使用Vuex,store文件常用的两种方式:

第一种是按照官网核心概念分类的方式;第二种以模块管理的方式。

第一种方式的目录:

index.js的写法:

以下demo是第二种采用模块管理的方式。

store的目录是以下方式: 

在index.js文件中引入modules里面文件

以user.js为例,常用的两种写法:

第一种,store使用(state,mutations,actions)的写法:


const user {
    state: {
        user: sessionStorage.getItem('user') || {}
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user
        }
    },
    actions: {
        // 第一种写法
        setUser({commit}, user) {
            commit('SET_USER', user)
            sessionStorage.setItem('user', user)
        }
        // 第二种写法
        setUser(ctx, user) {
            ctx.commit('SET_USER', user);
            sessionStorage.setItem('user', user)
        }
    }
}

export default user;

.vue文件调用:通过vuex的mapActions的使用方法及获取值常用的两种方式:

import { mapState, mapActions } from 'vuex';

export default {
    data() {
        return {}
    },
    // 第一种写法
    computed: {
        user() {
            return this.$store.state.user.user;
        }
    },
    // 第二种写法
    computed: mapState({
        user: state => state.user.user
    }),
    methods: {
         // 第一种通过dispatch调用
        changeUserInfo(value) {
            this.$store.dispatch('setUser', value)
        }
        // 第二种通过mapActions调用
        ...mapActions(['setUser']),
        changeUserInfo(value){
            this.setUser(value)
        }
       
    }
}

第二种:store使用(state,mutations)的写法

const user = {
    state: {
        user: sessionStorage.getItem('user') || {}
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            sessionStorage.setItem('user', user)
        }
    }
}

export default user;

.vue文件调用:通过vuex的mapActions的使用方法及获取值常用的两种方式:

import { mapState, mapMutations} from 'vuex';

export default {
    data() {
        return {}
    },
    // 第一种写法
    computed: {
        user() {
            return this.$store.state.user.user;
        }
    },
    // 第二种写法
    computed: mapState({
        user: state => state.user.user
    }),
    methods: {
        // 第一种通过commit调用
        changeUserInfo(value) {
             this.$store.commit('setUser', value)
        }
        // 第二种通过mapMutaions调用
        ...mapMutations(['setUser']),
        changeUserInfo(value){
            this.setUser(value)
        }
        
    }
}

以上代码均为日常使用总结的,如果有什么问题,还请各位评论区指教;有什么好的写法,可以评论区分享一下,谢谢。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页