vuex使用方法

2024年1月16日 229次阅读 来源: Msevensun

本实例主要讲vuex一种简单使用方法，也是官网推荐的方法执行流程，涉及技术点vue2+vuex+axios。

vuex是vue应用的状态管理模式，说白了就是管理vue的一些状态信息，主要包括：

  1. state/mapState

  2. getters/mapGetters

  3. mutations

  4. actions

  5. modules

想要具体了解vuex请访问官网

上代码：

store.js

export default  {
    state: {
        messageList:  [] //state初始化数据
    },
    getters: {
        messageList: state => state.messageList  //获取messageList数据
    },
    mutations: {
        ['GET_MESSAGE_LIST'](state, res) { //改变state中的数据
            state.messageList = res.data.messageList; //赋值方式
            // state = { ...state, messageList: res.data.messageList }//这中方式可以改变state中的状态，但是getters数据不同步，不知是ES6不支持还是什么原因？有了解的朋友帮忙解释下 不胜感激！
        }
    },
    actions: {
        getMessageList({commit}) {
            Vue.prototype.$http.get('test/messageList.json') //这里是把axios写在原型上了，我是这么调用的，也有其他调用方式
            .then(res => {
                commit('GET_MESSAGE_LIST', res) 执行mutations方法
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
}

messageList.vue组件

<script>
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {}
        },
        computed: {
            ...mapGetters([ //把getters映射到组件内部数据即可使用
               'messageList'
            ])
        },
        methods: {
            submitGetMessageList(){
                this.$store.dispatch('getMessageList');//$dispatch在vue2中已废除，此处用的是elementUI中的方法，触发actions
            }
        }
    }
</script>

vuex mutations是唯一改变state的值，Action 提交的是 mutation，不是直接更改state状态，大概就是这么个流程！

    原文作者：Msevensun
    原文地址: https://segmentfault.com/a/1190000009570588
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞