- 將組件之間需要操作的共享數(shù)據(jù)保存到Vuex中，實(shí)現(xiàn)簡(jiǎn)單全局共享和更新，不需要再組件之間層層傳遞
基本使用
<div id="app">
<father></father>
</div>
-
導(dǎo)入
<script src="js/vuex.js"></script> -
創(chuàng)建Vuex對(duì)象
const store = new Vuex.Store({ /* 1.state就相當(dāng)于組件中的data */ state: { msg: "lnj" } }) -
在Vue實(shí)例中在綁定Vuex對(duì)象
new Vue({ el: '#app', /* 1.在頂級(jí)組件中通過store屬性綁定Vuex對(duì)象 2.綁定了Vuex的組件那么除了它自己，它子組件都可以使用共享數(shù)據(jù)*/ store: store, components:{ "father": { template:"#father", components: { 'son': { template: '#son' } } }, }, }); -
使用數(shù)據(jù)
<template id="father"> <div> <p>爸爸</p> <son></son> <!-- 1.通過this.$store拿到Vue對(duì)象，就可以使用共享數(shù)據(jù)了--> <p>{{ this.$store.state.msg }}</p> </div> </template> <template id="son"> <div> <p>兒子</p> <p>{{ this.$store.state.msg }}</p> </div> </template>
共享數(shù)據(jù)的使用和修改
-
定義兩個(gè)同等級(jí)子組件，再子組件內(nèi)修改數(shù)據(jù)
<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', // 再頂級(jí)父組件中通過store屬性保存Vuex對(duì)象 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屬性
相當(dāng)于組件中的methods屬性
-
雖然可以在組件內(nèi)部可以通過methods屬性新建方法操作共享的數(shù)據(jù)，但不推薦，因?yàn)檫@種直接操作共享數(shù)據(jù)的方式，當(dāng)問題出現(xiàn)的時(shí)候很難排錯(cuò)不專業(yè)，推薦通過在Vuex的實(shí)例中的mutations屬性建立修改共享數(shù)據(jù)的方法，然后再組件的methods屬性，建立方法，再該內(nèi)部方法上調(diào)用Vuex實(shí)例對(duì)象的方法
<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就相當(dāng)于組件中的methods mutations: { // 通過方法的形參可拿到state屬性上的數(shù)據(jù) _add (state) { state.number++ }, _sub (state) { state.number-- }, } })new Vue({ el: '#app', store: store, components:{ "son1": { template:"#son1", /* 1.在各自的組件上methods新建方法，在該方法上調(diào)用Vuex實(shí)例對(duì)象的方法*/ methods: { add () { /* 1.調(diào)用Vuex的方法需要通過commit方法 格式： Vuex實(shí)例對(duì)象.commit("需要調(diào)用的方法名稱")*/ 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一樣，會(huì)將數(shù)據(jù)緩存起來，只有數(shù)據(jù)發(fā)生變化才會(huì)重新計(jì)算
<div id="app"> <son1></son1> <son2></son2> </div><template id="son1"> <div> <p>我是son1</p> <!--會(huì)將數(shù)據(jù)緩存起來，只有數(shù)據(jù)發(fā)生變化才會(huì)重新計(jì)算--> <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("函數(shù)被執(zhí)行了") return state.str1 + state.str2 } } }) new Vue({ el: '#app', store: store, components:{ "son1": { template:"#son1", }, "son2": { template:"#son2", }, }, });
