vue-element-admin中如何vuex的使用

vue-element-admin中把store給model化了，就是說分成a/b/c/d...的很多模塊，每個模塊都有自己的state/mutation/getter/action,在大的項目中，這么做的效果還是顯而易見的，因為單一的狀態樹種，隨着項目的不斷迭代，會有很多狀態和mutation放入同一個state/mutation對象中，難免會使對象臃腫不堪。

 

一：首先要創建一個自己的store模塊，在store/modules中創建一個my.js,並在其中書寫自己的state/mutation/action

const my = {
  state: {
    ceshi: 1
  },
 
  mutations: {
    CESHI_NUM: (state, data) => {
      state.ceshi += data
    },
  },
 
  actions: {
    ceshi({ commit, state }, data) {
      commit('CESHI_NUM', data)
    },
  }
}
 
export default my

二：在store的index中注冊my.js

import my from './modules/my'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  modules: {
    my
  }
})

三：在組件中調用和改變狀態樹

<template>
  <div class="">
    <el-button type="primary" icon="el-icon-search" @click="change_vuex">測試vuex</el-button>
    <el-button type="primary" icon="el-icon-search" @click="change_vuex_ansnc">異步測試vuex</el-button>
    <div>原stor中注冊的為：{{ ceshia }}</div>
  </div>
</template>
<script>
import store from '../../../store'
export default {
  mounted() {
    
  },
  data() {
    return {
      
    }
  },
  computed: {
    ceshia() {
      return store.state.my.ceshi
    }
  },
  methods: {
    change_vuex() {
      store.commit('CESHI_NUM',10)
    },
    change_vuex_ansnc() {
      store.dispatch('ceshi', 10)
    },
  }
}
</script>

 

 

參考---https://blog.csdn.net/wangle_style/article/details/90287742