>[success] # Vuex -- Action 異步 ~~~ 1.Action 類似于 mutation，不同在于： 1.1.Action 提交的是 mutation，而不是直接變更狀態。 1.2.Action 可以包含任意異步操作。 2.上面兩句話出自官網，簡單的說就是，如果數據是異步獲取，在改變state 中的值，我們就不能使用'mutation' 去操作，'mutation' 只能操作一些同步請 求去改變'state' 中的值，因此需要'Action ' 間接控制 3.更多詳細的要看文檔 ~~~ >[info] ## 使用Action ~~~ 1.詳細看看文檔 ~~~ >[danger] ##### 在我們的api文件下創建app.js模擬異步 ~~~ export const getAppName = () => { return new Promise((resolve, reject) => { const err = null setTimeout(() => { if (!err) resolve({ code: 200, info: { appName: 'newAppName' } }) else reject(err) }) }) } ~~~ >[danger] ##### 在store.vue 視圖中寫法 ~~~ 1.在視圖使用的時候，想調用'actions' 中的方法需要使用 this.$store.dispatch('actions對應的方法名','傳遞的參數') ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">點擊</button> </div> </template> <script> import { mapGetters,mapState, mapMutations} from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ // actions 中對應方法操控 this.$store.dispatch('updateAppName') }, }, computed:{ ...mapGetters(['appNameWithVersion']), } } </script> <style scoped> </style> ~~~ >[danger] ##### 在action.js 寫法 ~~~ 1.actions 中自定義方法，這里使用了es6的用法，把{commit }作為參數使用， 因為'actions ' 給去調用'mutations' 調用'mutations' 只能同過commit，因此可以理 解為什么在'actions' 中的方法參數是'commit' 2.commit('SET_APP_NAME', appName) 第一個參數是調用'mutations'里面的方 法，第二個是傳遞的參數 ~~~ ~~~ import { getAppName } from '@/api/app' const actions = { updateAppName ({ commit }) { getAppName().then(res => { const appName = res.info; // 內部操作'mutation' commit('SET_APP_NAME', appName) }).catch(err => { console.log(err) }) } } export default actions ~~~ >[danger] ##### 使用mapActions ~~~ 1.在methods 中調用： ...mapActions([ 'updateAppName' ]), 2.在對應使用的地方調用即可 ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">點擊</button> </div> </template> <script> import { mapGetters,mapState, mapMutations,mapActions} from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ ...mapActions([ 'updateAppName' ]), handleChangeAppVersion(){ // actions 中對應方法操控 //this.$store.dispatch('updateAppName') this.updateAppName(); }, }, computed:{ ...mapGetters(['appNameWithVersion']), } } </script> <style scoped> </style> ~~~