>[success] # mutations-- 擴展 ~~~ 1.上面的參數使用理解章節簡單的示范了mutations 2.官方文檔中還給了更簡單的使用方法，我們可以不使用 this.$store.commit('mutations 中的方法名','參數對象'),這種方式獲取值,使用 提供的'mapMutations 輔助函數' ~~~ >[info] ## mapMutations 輔助函數 ~~~ 1.Vuex 給我們提供了輔助函數，使用的時候只需要引入輔助函數即可: import { mapMutations } from 'vuex' 2.上面的引入方式用了es6的結構賦值，相當于下面的寫法: import vuex from 'vuex' const mapMutations = vuex.mapMutations ~~~ >[danger] ##### 官方給的幾種寫法 ~~~ import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')` // `mapMutations` 也支持載荷： 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')` }) } } ~~~ >[danger] ##### 使用mapMutations 輔助函數 改造參數理解章節案例 ~~~ 1.改造的時候注意mapMutations 必須放到methods 調用，調用后直接當， 放在使用即可 ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <p>{{timee}}</p> <button @click="handleChangeAppVersion">點擊</button> <button @click="handleChangetime">時間</button> </div> </template> <script> import { mapGetters,mapState, mapMutations} from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ ...mapMutations (['SET_APP_NAME',]), handleChangeAppVersion(){ this.SET_APP_NAME({appName:"111"}) }, handleChangetime(){ this.$store.commit({ type:'SET_Time', }) }, }, computed:{ ...mapState(['timee']), ...mapGetters(['appNameWithVersion',]), } } </script> <style scoped> </style> ~~~