mpvue使用vuex和axios遇到的问题

利用axios发送交易

import axios from 'axios'

axios.defaults.adapter = function(config) {
  //发交易之前显示加载中
  wx.showLoading({ title: '拼命加载中...' })
  //发交易调用(开发放开注释)
  return new Promise((resolve, reject) => {
    console.log(config);
    wx.request({
      ...config,
      url: config.url,
      data: config.params,
      success: res => {
        console.log(res)
        reject(res.data)
      },
      complete: res => {
        wx.hideLoading()
        // TODO:
      }
    });
  })
}
export default axios

直接使用axios报错,因为微信小程序必须走wx.request发送交易。

vuex状态管理添加

注意:挂载 在Vue原型上才能 使用this.$store,即在main.js中Vue.prototype.$store = store

import { getBoardData } from '@/utils/api'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    page: 1,
    hasMore: true,
    movies: [],
    type: ''
  },
  mutations: {
    listClearState: (state) => {
      console.log('listClearState')
      state.page = 1
      state.hasMore = true
      state.movies = []
    },
    listMovieList: (state, { data, type }) => {
      state.type = type
      console.log(data);
      if (data.subjects.length) {
        state.movies.push.apply(state.movies, data.subjects)
        // state.movies=state.movies.concat(data.subjects)
        console.log('movies concat end',state.movies.length)
       //测试到底用的,10是后台返回的数据,判断是否还有下一页
        if(state.movies.length>10){
          state.hasMore = false
        }
      }
    }
  },
  actions: {
    async getMovies({ state, commit }, { type, search }) {
      console.log('actions')
      if (!state.hasMore) return
      let data = await getBoardData({ board: type, page: state.page++, search })
      commit('listMovieList', { data, type })
    }
  }
})

export default store

对应页面 调用action方法

import store from './store'
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['movies', 'hasMore', 'type'])
  },
  methods: {
    ...mapActions(['getMovies']),
    ...mapMutations({
      clearState: 'listClearState'
    }),
    async getShowList () {
      await this.getMovies({})
    }
  },
  store
} 

利用mapState,mapActions,mapMutations进行数据的解构,将store里面的state值和action、mutation上面的方法解构出来。可以直接写this.page获取到用到state上的值,而不用store.state.page先获取到store上的值,然后赋值给this上的变量,页面视图进行取值。同理

...mapActions(['getMovies']),
...mapMutations({
   clearState: 'listClearState'
})

可以直接使用this.getMoviesthis.clearState使用store上的方法。action中可以进行异步操作,mutation中不能有异步操作

页面进行dispatch一个action,actions中commit一个mutation进行数据更新。

组件

父组件


:movies是通过props传递到子组件,:v-bind:的缩写,进行动态绑定

子组件





上拉加载更多

async onPullDownRefresh() { // 下拉刷新
    console.log('下拉刷新')
    this.clearState()
    await this.getShowList()
    wx.stopPullDownRefresh()
},

onReachBottom() { // 上拉加载
    console.log('上拉加载')
    this.getShowList()
},

onUnload() { // 清空状态
    console.log('清空状态')
    this.clearState()
}

onPullDownRefresh微信的生命周期函数中上拉触发,onReachBottom微信的生命周期函数中下拉触发。

下拉刷新还需要设置配置

对应的main.js开启下拉刷新

export default {
  config: {
    enablePullDownRefresh: true
  }
}

本地开发转发后台

由于本地开发,前后端分离,需要转发后台接口

/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",
"proxy1": "node kelan/app.js",
"proxy2": "node kelan/proxy.js",

在命令行执行npm run dev:proxy1

在根目录下面新建 kelan 文件夹,新建app.js文件

const Koa = require('koa')
const router = require('koa-router')()
const request = require('co-request')

const URI = 'http://127.0.0.1:3000'

router.prefix('/prefix')
router.get(['/:type', '/:type/:id'], async ctx => {
  let result
  try {
    let url = ctx.url.replace(/\/prefix(\w*)/, URI + '$1')
    console.log(':::', url, ':::')
    result = await request({uri: url, method: ctx.method}) // 返回的是字符串
    console.log('result', result);
  } catch (error) {
    throw new Error(error)
  } finally {
    ctx.body = JSON.parse(result.body)

  }
})

const app = new Koa()
app.use(router.routes())

app.listen(3001, () => {
  console.log(`Server started on 3001`)
})

用koa2进行代理转发

注意事项


在mpvue中,组件功能、vuex和vue保持一致,路由的单页面网上有大牛进行了封装,最新版mpvue1.0.10官方没给出解决方案。

  • 开发调试的时候需要打debugger需要将小程序自带的调试工具中的es6转为es5功能关闭
  • created和mounted在进入首页的时候其他页面的create和mounted都自动执行了一次,之后再次进入页面就不执行了。所以在初始化页面的时候就需要用onShow进行第一次进入页面进行数据重置等。

 

你可能感兴趣的:(mpvue使用vuex和axios遇到的问题)