vuex狀態管理mutations，getters，actions總結（鄒文豐）

本文轉載自查看原文 2018-04-09 16:27 1200 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
    <p>{{count}}
        <button @click="inc">+</button>
        <button @click="dec">-</button>
        <button @click="test">test</button>
        <button @click="test2">test2</button>
        <button @click="getter1">getter1</button>
        <button @click="Actions1">Actions</button>
    </p>
</div>
<script>
    const store = new Vuex.Store({
            state: {
                count: 0,
                res:1,
                test:2,
                getters_:'getters_'
            },
            getters:{
                gettersFirst:function (state) {alert(state.getters_)},
            },
            mutations:{
                inc: state =>{return state.count++},
                dec: state =>{return state.count--},
                increment(state){alert(state.count--)},
                test:(state) =>{alert(state.test)},
            },
            actions: {
                Actions(count){
                    setTimeout(function () {
                        alert(count.state.test)
                    },1000)
                }
            }
    })

    const app = new Vue({
        el: '#app',
        computed: { //計算屬性
            count2 (){
                alert(1)
            },
        },
        methods: {//函數方法
            inc () {
                store.commit('inc')
            },
            dec () {
                store.commit('dec')
            },
            test () {
                store.commit('increment')
            },
            test2 () {
                store.commit('test')
            },
            getter1(){
                store.getters.gettersFirst
            },
            Actions1(){
                store.dispatch('Actions')
            }
        },
        watch:{}

    });
/*****默認執行方法********/
//    app.count2; //默認執行
//    app.test2 ()
//    app.jianTou ()

/*****Vue原本的方法對比********/
    //1.computed是在HTML DOM加載后馬上執行的，
    //2.如賦值；而methods則必須要有一定的觸發條件才能執行，如點擊事件；
    //3.watch呢？它用於觀察Vue實例上的數據變動。對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。
    //4.所以他們的執行順序為：默認加載的時候先computed再watch，不執行methods；等觸發某一事件后，則是：先methods再watch。
    //總之：數據量大，需要緩存的時候用computed；每次確實需要重新加載，不需要緩存時用methods

/*****VueX的一些屬性方法特點總結********/
//    1.state：包含了store中存儲的各個狀態也叫數據。
//    2.getter: 類似於 Vue 中的計算屬性，根據其他 getter 或 state 計算返回值。//調用方法store.getters.gettersFirst
//    3.mutation: 一組方法，是改變store中狀態的執行者。Mutation 必須是同步函數。 //緩存的方法作用 調用方法例如： store.commit('inc')
//    4.action: 一組方法，其中可以含有異步操作。  //調用方法 store.dispatch('Actions')



</script>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vuex實踐（中）-多module中的state、mutations、actions和getters vuex的getters和actions的使用第十六節：Vuex4.x 簡介及state、getters、mutations、actions詳解(OptionApi 和 CompositionApi) vuex所有核心概念完整解析State Getters Mutations Actions Vue狀態管理vuex中mutations的用法 vuex的mutations與actions的使用測試 Vuex中mutations和actions的區別 vuex 為什么要區分 actions 和 mutations Vue狀態管理vuex中getters的用法 Vue狀態管理vuex中actions的用法