Vuex ,一個專為 Vue.js 應用程式開發的狀態管理模式
阿新 • • 發佈:2019-01-13
vuex : 狀態管理器,能夠管理你的資料狀態
作用:將資料交給state集中管理、分發。
應用:用於複雜的頁面,一個數據被多個頁面或者路由共享(互相互動),或者多層級資料互動時可以使用vuex
參考地址:https://vuex.vuejs.org/zh/
3.引用:
Vue.use(Vuex)
4.new Vuex.Store({...})
先安裝vue環境:vue create app
使用vuex步驟: 1.安裝:npm i vuex 2.引包: 引 vue 和 vuex 比如: import Vue from 'vue'; import Vuex from 'vuex';new Vuex.Store({
//你想要哪些資料被所有元件直接拿到就把這些資料放到state下
state:{
//初始化狀態
count:10,
注意:改變state中的引用型別的資料必須要讓資料直接發生變化(地址發生變化)
比如:
arr:[{id:xx,num:123}]
{id:xx,num: 124}
state.arr = [...state.arr]
},
mutations:{
//改變資料的方法
add(state){ //這裡的state就是初始化狀態
//此處為改變state.xxx資料的程式碼...
}
//呼叫:this.$store.commit(mutations中的函式名,可以跟引數)
//注意:在mutations下的操作都是同步的。
}
})
5:new Vue({
store
})
State:驅動應用的資料來源
在輸出state的時候,可以使用輔助函式來簡化你的操作(不用也行)。
1.import {mapState} from 'vuex' 2.(1) computed:mapState(['count']) 2.(2) 建議第二步使用這種: computed:{ ...mapState(['count']) }getters (等同於computed):當資料發生變化的時候派生出另一個“事務” view (檢視)層應用: this.$store.getters.xxx 輔助函式: mapGetters(['xxx'])
使用元件 - 第三方元件
actions(只要是這個資料的狀態需要被很多元件使用,並且此資料還是一個從後臺請求的資料(非同步資料)就要使用actions) actions:{ actionsName($store,可以跟引數){ //非同步環境之後使用 $store.commit('add',引數) } } view層使用: this.$store.dispatch('actionsName',傳參)
*/
/* vue常用的UI元件: https://www.cnblogs.com/theblogs/p/9964753.html