vuex.js
狀態(tài)（數據）管理
在vue中當我們管理數據的時候比較亂，我們要用到下面的這個庫，vuex.js
Vuex介紹
每一個Vuex應用的核心就是store（倉庫），他是用來存儲數據的
"store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài)(state)。Vuex 和單純的全局對象有以下兩點不同
1.Vuex 的狀態(tài)存儲是響應式的
2.你不能直接改變 store 中的狀態(tài)
vuex有6個概念
讓我們看看怎么來創(chuàng)建一個創(chuàng)庫
store 用來儲存數據（狀態(tài)）
new Vuex.Store({})數據我們放到state里面
state：{}讓我們看看怎么來讀取里面的數據
store.state.數據
接下來讓我們看看怎么去修改數據
mutations: {}我們怎么調mutations的數據
用commit()方法來調用
接下來讓我們做一個小效果來看一下vuex在vue中怎么應用
我們做一個購物車加減按鈕的效果
運行效果
<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里面獲取的數據最好放到計算屬性中
當一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用mapState輔助函數幫助我們生成計算屬性
下面我們做一個小的效果（注意：注釋的計算屬性和下面使用mapState輔助函數2個結果是相同的）
當映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給 mapState 傳一個字符串數組。
運行效果
<script> //我們從store里面獲取的數據最好放到計算屬性中 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)建計算屬性 // computed:{ // count(){ // return this.$store.state.count; // }, // num1(){ // return this.$store.state.num1; // }, // num2(){ // return this.$store.state.num2; // } // }, //使用mapState輔助函數 //computed:Vuex.mapState({ // count:state=>state.count, //num1:state=>state.num1, //num2:state=>state.num2 //}), //mapState 傳一個字符串數組 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
