vuex是基於vue框架的一個狀態管理庫,可以管理複雜應用的資料狀態,可以方便的實現組件之間的資料共享,例兄弟組件的通訊、多層嵌套的組件的傳值等等;它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式變化。
Vuex 是專為 Vue.js 應用程式開發的狀態管理模式,是基於vue框架的狀態管理函式庫。可以管理複雜應用的資料狀態,可以方便的實作元件之間的資料共享,例如兄弟元件的通訊、多層嵌套的元件的傳值等等。
Vuex採用集中式儲存管理應用的所有元件的狀態,並以對應的規則保證狀態以可預測的方式變更。
Vuex 也整合到 Vue 的官方偵錯工具 devtools extension,提供了諸如零配置的 time-travel 偵錯、狀態快照匯入匯出等進階偵錯功能。
Vuex中的核心特性
(1)State: 提供唯一的公共資料來源,所有共享的資料都要統一放到Store中的State中存儲
在元件中存取State的方式:
A.this.$store.state.全域資料名稱如:this.$store.state.count
##B.先按需導入mapState函數: import { mapState } from 'vuex'然後資料映射為運算屬性: computed:{ …mapState(['全域資料名稱']) }#( 2) Mutation:用於修改變更$store中的數使用方式:開啟store.js文件,在mutations中加入程式碼如下:mutations: { add(state,step){ //第一个形参永远都是state也就是$state对象 //第二个形参是调用add时传递的参数 state.count+=step; } }然後在Addition.vue中為按鈕新增事件程式碼如下:
<button @click="Add">+1</button> methods:{ Add(){ //使用commit函数调用mutations中的对应函数, //第一个参数就是我们要调用的mutations中的函数名 //第二个参数就是传递给add函数的参数 this.$store.commit('add',10) } }使用mutations的第二種方式:
import { mapMutations } from ‘vuex’ methods:{…mapMutations([‘add’])}如下:
import { mapState,mapMutations } from 'vuex' export default { data() { return {} }, methods:{ //获得mapMutations映射的sub函数 ...mapMutations(['sub']), //当点击按钮时触发Sub函数 Sub(){ //调用sub函数完成对数据的操作 this.sub(10); } }, computed:{ ...mapState(['count']) } }(3 )Action:在mutations中無法編寫非同步的程式碼,會導致vue偵錯器的顯示出錯。在vuex中我們可以使用Action來執行非同步操作。
操作步驟如下:
actions: { addAsync(context,step){ setTimeout(()=>{ context.commit('add',step); },2000) } }然後在Addition.vue中新增事件程式碼如下:
<button @click="AddAsync">...+1</button> methods:{ AddAsync(){ this.$store.dispatch('addAsync',5) } }(4)Getter:用於對Store中的資料進行加工處理形成新的資料。 它只會包裝Store中保存的數據,並不會修改Store中保存的數據,當Store中的數據發生變化時,Getter產生的內容也會隨之變化。
開啟store.js文件,加入getters,如下:
export default new Vuex.Store({ ....... getters:{ //添加了一个showNum的属性 showNum : state =>{ return '最新的count值为:'+state.count; } } })然後開啟Addition.vue中,新增插值表達式使用getters
<h3>{{$store.getters.showNum}}</h3>也可以在Addition.vue中,匯入mapGetters,並將之映射為計算屬性
import { mapGetters } from 'vuex' computed:{ ...mapGetters(['showNum']) }
相關建議:更多程式相關知識,請造訪:
程式教學! !
以上是vuex有什麼用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!