Vue-Vuex-共享數據

  • 將組件之間需要操作的共享數據保存到Vuex中,實現簡單全局共享和更新,不需要再組件之間層層傳遞

基本使用

<div id="app">
    <father></father>
</div>
  • 導入

    <script src="js/vuex.js"></script>
    
  • 創建Vuex對象

    const store = new Vuex.Store({
        /* 
        1.state就相當于組件中的data */
        state: {
            msg: "lnj"
        }
    })
    
  • 在Vue實例中在綁定Vuex對象

    new Vue({
        el: '#app',
        /* 
        1.在頂級組件中通過store屬性綁定Vuex對象
        2.綁定了Vuex的組件那么除了它自己,它子組件都可以使用共享數據*/
        store: store,
        components:{
            "father": {
                template:"#father",
                components: {
                    'son': {
                        template: '#son'
                    }
                }
            },
        },
    });
    
  • 使用數據

    <template id="father">
        <div>
            <p>爸爸</p>
            <son></son>
            <!--
          1.通過this.$store拿到Vue對象,就可以使用共享數據了-->
            <p>{{ this.$store.state.msg }}</p>
        </div>
    </template>
    
    <template id="son">
        <div>
            <p>兒子</p>
            <p>{{ this.$store.state.msg }}</p>
        </div>
    </template>
    

共享數據的使用和修改

  • 定義兩個同等級子組件,再子組件內修改數據

    <template id="son1">
        <div>
            <button @click="add">增加</button>
            <button @click="sub">減少</button>
            <input type="text" v-model:value="this.$store.state.number">
        </div>
    </template>
    <template id="son2">
        <div>
            <button @click="add">增加</button>
            <button @click="sub">減少</button>
            <input type="text" v-model:value="this.$store.state.number">
        </div>
    </template>
    
    const store = new Vuex.Store({
        state: {
            number: 0
        }
    })
    
    new Vue({
        el: '#app',
        // 再頂級父組件中通過store屬性保存Vuex對象
        store: store,
        components:{
            "son1": {
                template:"#son1",
                methods: {
                    add () {
                        this.$store.state.number++
                    },
                    sub () {
                        this.$store.state.number--
                    },
                }
            },
            "son2": {
                template:"#son2",
                methods: {
                    add () {
                        this.$store.state.number++;
                    },
                    sub () {
                        this.$store.state.number--;
                    },
                }
            },
        },
    });
    
    <div id="app">
        <son1></son1>
        <son2></son2>
    </div>
    

Vuex的mutations屬性

  • 相當于組件中的methods屬性

  • 雖然可以在組件內部可以通過methods屬性新建方法操作共享的數據,但不推薦,因為這種直接操作共享數據的方式,當問題出現的時候很難排錯不專業,推薦通過在Vuex的實例中的mutations屬性建立修改共享數據的方法,然后再組件的methods屬性,建立方法,再該內部方法上調用Vuex實例對象的方法

    <template id="son1">
        <div>
            <button @click="add">增加</button>
            <button @click="sub">減少</button>
            <input type="text" v-model:value="this.$store.state.number">
        </div>
    </template>
    <template id="son2">
        <div>
            <button @click="add">增加</button>
            <button @click="sub">減少</button>
            <input type="text" v-model:value="this.$store.state.number">
        </div>
    </template>
    
    <div id="app">
        <son1></son1>
        <son2></son2>
    </div>
    
    const store = new Vuex.Store({
        state: {
            number: 0
        },
        // mutations就相當于組件中的methods
        mutations: {
            // 通過方法的形參可拿到state屬性上的數據
            _add (state) {
                state.number++
            },
            _sub (state) {
                state.number--
            },
        }
    })
    
    new Vue({
        el: '#app',
        store: store,
        components:{
            "son1": {
                template:"#son1",
                /*
                1.在各自的組件上methods新建方法,在該方法上調用Vuex實例對象的方法*/
                methods: {
                    add () {
                        /*
                        1.調用Vuex的方法需要通過commit方法
                        格式:
                        Vuex實例對象.commit("需要調用的方法名稱")*/
                        this.$store.commit("_add")
                    },
                    sub () {
                        this.$store.commit("_sub")
                    }
                }
            },
            "son2": {
                template:"#son2",
                methods: {
                    add () {
                        this.$store.commit("_add")
                    },
                    sub () {
                        this.$store.commit("_sub")
                    }
                }
            },
        },
    });
    

Vuex的getters屬性

  • Vuex的getters屬性就和組件的computed一樣,會將數據緩存起來,只有數據發生變化才會重新計算

    <div id="app">
        <son1></son1>
        <son2></son2>
    </div>
    
    <template id="son1">
        <div>
            <p>我是son1</p>
            <!--會將數據緩存起來,只有數據發生變化才會重新計算-->
            <p>{{ this.$store.getters.result }}</p>
            <p>{{ this.$store.getters.result }}</p>
            <p>{{ this.$store.getters.result }}</p>
        </div>
    </template>
    <template id="son2">
        <div>
            <p>我是son2</p>
            <p>{{ this.$store.getters.result }}</p>
        </div>
    </template>
    
    const store = new Vuex.Store({
        state: {
            str1: "www.baidu.com",
            str2: "百度"
        },
        // getters與組件中的computed屬性基本用法基本一致
        getters: {
            result: function (state) {
                console.log("函數被執行了")
                return state.str1 + state.str2
            }
        }
    })
    
    new Vue({
        el: '#app',
        store: store,
        components:{
            "son1": {
                template:"#son1",
            },
            "son2": {
                template:"#son2",
            },
        },
    });
    
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.插槽 1.1匿名插槽 <!DOCTYPE html> 52-Vue組件-匿名插槽 ...
    煤球快到碗里來閱讀 628評論 0 0
  • 為什么要用vuex? 首先,需要清楚為什么要用vuex,當我們的應用遇到**多個組件共享狀態**時 -多層級父子組...
    kino2046閱讀 492評論 0 1
  • 一、概念介紹 Vue.js和React.js分別是目前國內和國外最火的前端框架,框架跟類庫/插件不同,框架是一套完...
    劉遠舟閱讀 1,088評論 0 0
  • ## 框架和庫的區別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,979評論 1 4
  • 計算屬性 監聽 methods 里面用來設置方法 在模板得表達式里使用這個方法 '{{}}' 雙向數據綁定 v-m...
    web前端學習小白閱讀 333評論 0 1