- 將組件之間需要操作的共享數據保存到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", }, }, });
