vuex的使用總結
阿新 • • 發佈:2017-11-14
使用總結 exp span ons 替代 get vuex types mut
vuex的使用 1.組件中通過dispatch事件觸發actions eg: methods: { 事件名: function() { this.$store.dispatch("鍵值名", 需要存儲的值); }, } 2.通過actions進行commit提交給mutation eg:action.js 鍵值名({commit},需要存儲的值){ commit(types.NEWSHOW,需要存儲的值); }, 3.mutation通過mutate給state eg:mutation.js [types.NEWSHOW](state,需要存儲的值){ state.需要存儲的值的名稱=需要存儲的值; }, 4.在store.js裏進行getter處理 eg: show(state){ return state.需要存儲的值的名稱 }, 5.在組件裏進行獲取 eg: import { mapGetters } from "vuex"; computed: { ...mapGetters(["show"]) }, 6.註意:使用常量替代 Mutation 事件類型 eg:mutation_type.js export const NEWSHOW="NEWSHOW" eg:目錄結構: store action.js import * as types from ‘./mutation_type‘這是全局引入,也可以按需引入 export default{ newShow({commit},bData){ commit(types.NEWSHOW,bData); } } mutation.js import * as types from ‘./mutation_type‘ export default{ [types.NEWSHOW](state,bData){ state.show=bData; } } mutation_type.js export const NEWSHOW="NEWSHOW" store.js import Vue from ‘vue‘ import Vuex from ‘vuex‘ import actions from ‘./action‘ import mutations from ‘./mutation‘ Vue.use(Vuex) const store = new Vuex.Store({ state:{ show: false, }, actions, mutations, getters:{ show(state){ console.log(state.show) return state.show } }) export default store 至於事件觸發和組件裏獲取和上面一樣的!
vuex的使用總結