vuex的使用詳解大全
阿新 • • 發佈:2018-11-10
引言:
vue的vuex是一個全域性狀態管理工具,有強大的社群所貢獻,方便達到一端改變全域性改變功能,這裡就不強調如何使用了,單獨講解一下如何更好的使用這個工具。
先說一下這個使用的場景,如果僅是父子元件傳值這個大可不必使用,當你用本地儲存和廣播事件都不能滿足你的需求時,你就可以考慮使用vuex來管理你的資料了。
使用方法:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let state = { //vuex的狀態物件 user_info:{}, info:'', name:'' } let mutations = { //事件處理器驅動state狀態值變化的 changeInfo:state => (state.info ='警告') saveUser(state,payload) { state.user_info= payload ?payload: '{}' } changeName:(state,payload)=>{ state.name = payload.name } } let actions = { //可以給元件使用的函式,這裡可以加請求的方法或處理資料,以此來更好的驅動狀態變化 save({ commit, state }, payload){ ..... commit('openDrawerBox', payload)//必須使用commit來驅動 } } export default new Vuex.Store({ state, mutations, actions })
將此頁面的資料註冊到根檔案即可使用了
import store from './store' // 引入store物件 上述程式碼所在的頁面 // 例項化一個vue元件 new Vue({ el: '#app', router, store, // 注入到跟例項中 template: '<App/>', components: { App } })
程式碼解釋:vuex的規定狀態只能有mutations中的方法來修改,而派發mutations的方法須有action來觸發。基本元件的檢視的來呼叫action的方法在
這一層可以處理資料或與後臺互動然後將最終的資料使用commit派發給mutations來改變指定的store中的state值,這就是官網給的生命週期圖的解釋。
元件頁面呼叫方法一:
import { mapState, mapMutations } from 'vuex' computed: {//在計算週期方法內引入 ...mapState( ['user_info','name','info']) //這樣即可在本頁面當做data方法內資料使用了,this.name }, methods: { ...mapMutations(['changeInfo','saveUser','changeName'])//註冊方法呼叫,這樣就可以在本元件中直接呼叫了 this.changeName('修改名稱') }
元件呼叫方法二:
import { mapState } from 'vuex' computed: { // 引用的複雜寫法; ...mapState({ name: state => state.name }) }, //直接在的某方法內觸發actions的方法; methods(){ this.$store.dispatch('save','修改名稱')
this.$store.commit({type:'saveUser',name:'修改名稱'})//直接呼叫
}
vuex的全域性狀態都儲存在$store的全域性物件上可以列印$store.state檢視狀態值