vue項目問題記錄

1、獲取數據

坑：

經過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
})

2、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)
    }
}

3、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配置