您好,登錄后才能下訂單哦!
如何快速應(yīng)用vue中的vuex,很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
vuex.js
狀態(tài)(數(shù)據(jù))管理
在vue中當(dāng)我們管理數(shù)據(jù)的時(shí)候比較亂,我們要用到下面的這個(gè)庫,vuex.js
Vuex介紹
每一個(gè)Vuex應(yīng)用的核心就是store(倉庫),他是用來存儲(chǔ)數(shù)據(jù)的
"store" 基本上就是一個(gè)容器,它包含著你的應(yīng)用中大部分的狀態(tài)(state)。Vuex 和單純的全局對象有以下兩點(diǎn)不同
1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的
2.你不能直接改變 store 中的狀態(tài)
vuex有6個(gè)概念
Store(最基本的概念)(創(chuàng)庫)
State (數(shù)據(jù))
Getters(可以說是計(jì)算屬性)
Mutations
Actions
Modules
讓我們看看怎么來創(chuàng)建一個(gè)創(chuàng)庫
store 用來儲(chǔ)存數(shù)據(jù)(狀態(tài))
new Vuex.Store({})
數(shù)據(jù)我們放到state里面
state:{}
讓我們看看怎么來讀取里面的數(shù)據(jù)
store.state.數(shù)據(jù)
接下來讓我們看看怎么去修改數(shù)據(jù)
mutations: {}
我們怎么調(diào)mutations的數(shù)據(jù)
用commit()方法來調(diào)用
接下來讓我們做一個(gè)小效果來看一下vuex在vue中怎么應(yīng)用
我們做一個(gè)購物車加減按鈕的效果
運(yùn)行效果
<div id="app"></div> <template id="tpl"> <div> <tip></tip> <but></but> </div> </template> <script> var store = new Vuex.Store({ state:{ count:0 }, mutations:{ jia (state) { state.count++ }, jian (state) { state.count-- } } }); var vm = new Vue({ el:"#app", template:"#tpl", components:{ tip:{ template:"<div>{{$store.state.count}}</div>" }, but:{ template:` <div> <input type="button" value="+" @click="$store.commit('jia')"/> <input type="button" value="-" @click="$store.commit('jian')"/> </div> ` } }, store }); </script>
我們從store里面獲取的數(shù)據(jù)最好放到計(jì)算屬性中
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題,我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性
下面我們做一個(gè)小的效果(注意:注釋的計(jì)算屬性和下面使用mapState輔助函數(shù)2個(gè)結(jié)果是相同的)
當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí),我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。
運(yùn)行效果
<script> //我們從store里面獲取的數(shù)據(jù)最好放到計(jì)算屬性中 var store = new Vuex.Store({ state:{ count:0, num1:1, num2:2 }, mutations:{ jia (state) { state.count++ }, jian (state) { state.count-- } } }); var vm = new Vue({ el:"#app", template:"#tpl", components:{ tip:{ //創(chuàng)建計(jì)算屬性 // computed:{ // count(){ // return this.$store.state.count; // }, // num1(){ // return this.$store.state.num1; // }, // num2(){ // return this.$store.state.num2; // } // }, //使用mapState輔助函數(shù) //computed:Vuex.mapState({ // count:state=>state.count, //num1:state=>state.num1, //num2:state=>state.num2 //}), //mapState 傳一個(gè)字符串?dāng)?shù)組 computed:Vuex.mapState(['count' , 'num1' , 'num2']), template:"<div>{{count}}{{num1}}{{num2}}</div>" }, but:{ template:` <div> <input type="button" value="+" @click="$store.commit('jia')"/> <input type="button" value="-" @click="$store.commit('jian')"/> </div> ` } }, store }); </script>
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。