vuex使用方法

本實例主要講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狀態，大概就是這麼個流程！