Vuex初級入門及簡單案例
阿新 • • 發佈:2018-11-16
1.為什麼要使用Vuex?
(1)方便所有元件共享資訊,方便不同元件共享資訊。
(2)某個元件需要修改狀態和需求。
2.狀態有哪些?
(1)元件內部定義的data狀態(通過元件內部修改)
(2)元件外部來的props(通過元件外部修改)
(3)Vuex裡的state(元件內部和外部都可以修改)
3.安裝Vuex
方法一:官網的安裝處有網址,點開儲存為成檔案,引入你要寫的專案就可以。 此方法需要在專案中用script引入。
方法二:npm install vuex --save
yarn add vuex
4.引入
Vue.use(Vuex)
const vm =new Vue({
el:"root"
})
在瀏覽器中輸入window.Vuex有列印的,表示引入成功。
5.Vuex的流程圖
元件根據state狀態渲染,多個元件可以共享state。不能再元件內部直接修改狀態。
State狀態的修改必需通過Mutations,Mutations裡面存的是函式。
Actions通過Commit操作來呼叫非同步資料,如果你的專案裡沒有呼叫非同步資料的需求,你可以直接從元件呼叫Mutations。
Actions裡面也是函式,通過Dispatch觸發。
Mutatins可以跟蹤所有的修改,儲存修改的過程。意義是做時間穿梭,記錄歷史。而Actions沒有此功能。
5.使用
Vue.use(Vuex)
var store = new Vuex.Store({ //全域性定義store
state:{
count:0
},
actions:{
},
mutations:{
increment(state,){ //寫一個函式,用來修改狀態,需要呼叫一下。
state.count++ //是響應式的,可以直接修改值。
}
}
})
cosnt AddButton = {
template:"<button> {{count}}</button>' //如果沒有在自定義屬性賦值,則在模板中寫{{$store.state.count}}
}
const vm =new Vue({
el:"root",
store //把定義好的store注入到元件中。此時你在瀏覽器後臺就可以通過寫window.store來查看了
components:{
AddButton
},
computed:{
count(){
return $store.state.count //通過計算屬性把state裡的值儲存在count裡,再呼叫就會很方便。
}
},
methods:{
increment(){
this.$store.commit("increment")
}
}
})
<div id="root">
{{$store.state.count}} //此時在頁面中就可以讀到0了
<att-button ><add-button>
</div>
<button @click="increment"></button>
時間旅行:每次通過
mutations 改變值都會在瀏覽器的vue中記錄下來,點選那個小圓圈。