vuex的特點
1.多元件共享狀態: 多個元件使用同乙個資料
2.任何乙個元件發生改變, 其他元件也要跟著發生相應的變化
基本使用：
安裝vuex npm install vuex
建立例項
import vuex from 『vuex』
import vue from 『vue』
vue.use(vuex)
const state =
const mutations = ,
changeage (state, params)
}const actions =
}const getters =
// 也可以使用箭頭函式的簡寫
// doubleage: state => state.age * 2
}const store = new vuex.store()
// 匯出並在main.js裡面引用&註冊
export default store
name: }
age: }
資料都存在this中的$store中, 可以console.log(this) 檢視裡面的資料
5 大核心 - state 和 mutation 是必須的
state 存放基本資料
getters 從state基本資料派生出的資料(類似vue中的computed)
mutations store中更改state資料狀態的唯一途徑
actions 通過dispatch觸發actions, actions在通過commit觸發mutations。一般用於處理非同步操作
modules 模組化vuex
輔助函式
幫助我們減少**量
四個方法
值型別向計算屬性(computed)對映
mapstate 將全域性狀態管理的state值對映到使用元件的計算屬性
mapgetters 將全域性狀態管理的getters值對映到使用元件的計算屬性中
函式型別向methods對映
mapmutations 將mutation的方法對映到methods裡面
mapactions 將actions裡面的方對映到methods裡面
import from 『vuex』
export default ,
methods: )},}
}
vuex的基本使用
首先先建立乙個store.js 安裝vue,vuex什麼的就不說了 這是乙個倉庫 import vue from vue import vuex from vuex vue.use vuex 裝載資料的乙個倉庫 const state 修改倉庫的方法 const mutations reduce s...
vuex的基本使用
npm i vuex s在index.js中寫入以下 import vue from vue import vuex from vuex vue.use vuex state是全域性狀態 const state 全域性的計算屬性 const getters 引數getters可以獲取getters裡...
vuex的基本使用
首先先建立乙個store.js 安裝vue,vuex什麼的就不說了 這是乙個倉庫 import vue from vue import vuex from vuex vue.use vuex 裝載資料的乙個倉庫 const state 修改倉庫的方法 const mutations reduce s...