vue项目问题记录

一、获取数据

坑：

通过props从父组件传过来的data只能在计算属性computed里面操作或者直接写在页面里面显示数据
原因：可能跟数据执行的顺序有关，在data函数和mounted阶段父组件传递过来的数据可能还没有被执行到

ajax获取数据

注意：
1.通过props传递数据给子组件，在computed里面设置data；
2.使用vuex设置数据的全局状态

main.js

import Vue from 'vue'
import car from './car.vue'
import ElementUI from 'element-ui'
import 'normalize.css'
import '../../../../theme/index.css'
import locale from 'element-ui/lib/locale/lang/en'
import store from 'components/trip/car/store/index.js'

Vue.use(ElementUI, { locale })
//问题：页面渲染的时候，oData数据为空的对象等到ajax请求完数据后才有数据
new Vue({
    store,
    data: {
        oData: {}
    },
    template: '<car :oData="oData"/>',
    components: { car },
    mounted () {
        var _this = this
        $.ajax({
            url: process.env.root + '/trip/detail/174',
            type: 'get',
            dataType: 'json',
            success: function (result) {
              if (result.status == 'y') {
                  console.log(result.source_data)
                  _this.oData = result.source_data
                // _this.oData = result.source_data
                
              }
            }
        })
    }

}).$mount("#app")

//修改成这样解决问题
    $.ajax({
    url: process.env.root + '/trip/detail/174',
    type: 'get',
    dataType: 'json',
    success: function (result) {
      if (result.status == 'y') {
        console.log(JSON.stringify(result.source_data))
        new Vue({
          store,
          data: {
            oData: result.source_data
          },
          template: '<car :oData="oData"/>',
          components: { car }

        }).$mount("#app")
        
      }
    }
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = { //data
    vehicleTypes: [],
    vehicleValue: '',
    bookDate: [],
    dateValue: '',
    bookPasg: [],
    pasgValue: '',
    posts: []
}

const getters = { //filter
    vehicleTypes: state => state.vehicleTypes,
    vehicleValue: state => state.vehicleValue,
    bookPasg: state => state.bookPasg,
    pasgValue: state => state.pasgValue,
    bookDate: state => state.bookPasg,
    dateValue: state => state.dateValue
}

const mutations = { //function
    setVehicleValue(state, val) {
        state.vehicleValue = val    
    },
    setPasgValue(state, val) {
        state.pasgValue = val
    },
    setDateValue(state, val) {
        state.dateValue = val
    },
}

const actions = { //do
    setVehicleValue({commit}, n) {
        commit('setVehicleValue', n)
    },
    setPasgValue({commit}, n) {
        commit('setPasgValue', n)
    },
    setDateValue({commit}, n) {
        commit('setDateValue', n)
    }
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

二、Vuex

1.在computed里面获取和更改数据 get() set()
2.需要在mutations里面注入方法，actions触发方法之行，getters里面设置数据（为了在组件对应computed里面设置）

pasgValue: {
    get () {
      return this.$store.state.pasgValue
    },
    set (value) {
      this.$store.dispatch('setPasgValue', value)
    }
  },

const state = { //data
    carPrice: '0', //总车费
}

const getters = { //filter
    carPrice: state => state.carPrice 
}

const mutations = { //function
    setCarPrice(state, val) {
        state.carPrice = val
    },
}

const actions = { //do
    setCarPrice({commit}, n) {
        commit('setCarPrice', n)
    }
}

三、Webpack配置

设置代理 config/index.js

  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://www.vaya.com:8080/',
            secure: false,
            changeOrigin: true,
            pathRewrite: {'^/api' : ''}
        }
    },
    cssSourceMap: false
  }

问题：跟本地的www.vaya.com有冲突
解决：修改本地服务器 1.hosts文件改名字lh.vaya.com 2.apache配置