mpvue使用vuex和axios遇到的問題

利用axios傳送交易

import axios from 'axios'
axios.defaults.adapter = function(config) )
//發交易呼叫(開發放開注釋)
return new promise((resolve, reject) => ,
complete: res => 
});})
}export default axios

vuex狀態管理新增

注意：掛載在vue原型上才能使用this.$store,即在main.js中vue.prototype.$store = store

import  from '@/utils/api'
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = new vuex.store(,
mutations: ,
listmovielist: (state, ) => }}
},actions: , ) )
commit('listmovielist', )
}}})
export default store

對應頁面呼叫action方法

import store from './store'
import  from 'vuex'
export default ,
methods: ),
async getshowlist () )}},
store
}

利用mapstate，mapactions，mapmutations進行資料的解構，將store裡面的state值和action、mutation上面的方法解構出來。可以直接寫this.page獲取到用到state上的值，而不用store.state.page先獲取到store上的值，然後賦值給this上的變數，頁面檢視進行取值。同理

...mapactions(['getmovies']),
...mapmutations()

可以直接使用this.getmovies和this.clearstate使用store上的方法。action中可以進行非同步操作，mutation中不能有非同步操作

頁面進行dispatch乙個action，actions中commit乙個mutation進行資料更新。

父元件

:movies是通過props傳遞到子元件，:是v-bind:的縮寫，進行動態繫結

子元件}

上拉載入更多

async onpulldownrefresh() ,
onreachbottom() ,
onunload()

下拉重新整理還需要設定配置

對應的main.js開啟下拉重新整理

export default 
}

本地開發**後台

由於本地開發，前後端分離，需要**後台介面

在/build/webpack.dev.conf.js中的plugins中新加'process.env.method': json.stringify(process.env.method)這個時候頁面裡面呼叫process.env.method就可以獲取到在package.json中儲存的全域性變數

package.json新加命令:

"dev:proxy1": "cross-env method=proxy1 npm-run-all --parallel dev proxy1", "dev:proxy2": "cross-env method=proxy2 npm-run-all --parallel dev proxy2",

"proxy2": "node kelan/proxy.js",

在命令列執行npm run dev:proxy1

const koa = require('koa')
const router = require('koa-router')()
const request = require('co-request')
const uri = ''
router.prefix('/prefix')
router.get(['/:type', '/:type/:id'], async ctx => ) // 返回的是字串
console.log('result', result);
} catch (error)  finally 
})  console.log(`server started on 3001`)
})

用koa2進行****

注意事項

在mpvue中，元件功能、vuex和vue保持一致，路由的單頁面網上有大牛進行了封裝，最新版mpvue1.0.10官方沒給出解決方案。

mpvue使用vuex和axios遇到的問題

mpvue和mysql的簡單使用

解決vuex輔助函式在mpvue中不能使用的問題

vuex幾大模組和Vuex助手使用詳解

mpvue使用vuex和axios遇到的問題

mpvue和mysql的簡單使用

解決vuex輔助函式在mpvue中不能使用的問題

vuex幾大模組和Vuex助手使用詳解

相關推薦