Article From:

customerMain page

    <div class="container">
            <tab-item :selected="index==0" @on-item-click="toggleItem">Follow up record < /tab-item>< tab-item: selected= "index==1" @on-item-click= "toggleItem" > customersHousehold information < /tab-item>< /tab>< swiper: height= "pageHeight" >&lT; router-view> < /router-view>< /swiper>< /div>< /template>&lT; script>Import {Tab, TabItem, Swiper, SwiperItem} from'vux'Import {mapGetters, mapActIons} from'vuex'Import * as types from'../vuex/mutation-types'Export default {Name:'customer',Data () {Return {Height: 180,Index: 0,Tabs: ['follow up record', 'customer information']}},Computed: {... mapGetters (['currentCustomer','clientH']),PageHeight () {RetUrn this.clientH - 44 +'px'}},Methods: {... mapActions (Types.GET_CUSTOMER]),ToggleItem (index) {If (index = = = 0) {This.$router.replace ({name:'followups'})} elseThis.$Router.replace ({name:'info'})},GetCustomer (ID) {This[typEs.GET_CUSTOMER] (ID).Then (resp => {Console.log ("customer")ConSole.log (RESP)Console.log (this.currentCustomer)})}},Components: {Tab, TabItem, Swiper},BeforeEnter (to, from, next) {Console.log ("to")},Created () {This.getCustomer (this.$$ = = = "info"? This.index = 1: this.index = 0}}&lT; /script>< style>< /style>##customerinfo page


<div class="customer-info">
    <div class="loading-box" v-show="loading">
        <p style="text-align:center;padding:15px;">
            Load in...< /p>< /div>< div v-show= "! Loading" >< group v-if="Customer" label-width= "7rem" label-margin-right= "4rem" label-align= "right" >< x-inPut title= "name" v-model= "" > < /x-input>< selector title= "sex" placeHolder= "please choose gender": options= "genders" v-model= "" > < /selector>< cell TItle= "mobile phone 1": value= "customer.mobilePhone1" > < /cell>< X-input title= "mobile 2" V-ModEl= "customer.mobilePhone2" > < /x-input>< X-input title= "fixed phone" v-model= "customeR.telePhone "> < /x-input>< selector title= "customer nature" placeholder= "please select customer nature": OptionS= "customerNature"V-model= "customer.cstType" > < /selector>< cell title= "home buyers consultant": value= "customer.saleman" is-link> < /cell>< cell title= "creation time": value= "|formatDate" is-link> < /cell>< /group>&lT; bottom-menu: menuItems= "menus" separator: on-click-item= "clickMenuItem" > < /bottom-menu>< /div>< /div>



import {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading} from 'vux'
import {mapState, mapGetters, mapActions} from 'vuex'
import BottomMenu from './bottom-menu/BottomMenu'
import * as types from '../vuex/mutation-types'

export default {
    name: 'CustomerInfo',
    data() {
        return {
            loading: false,
            customer: {
                id: ''
            backUrl: '',
            menus: [
                {text: 'Return 's',{text: 'Save'),{text: 'more')]}},Computed: {... mapState (['customerModule']),... mapGetters (['currentCustomer','gend)Ers','customerNature'])},Methods: {... mapActions ([types.UPDATE_CUSTOMER]),Update () {This.$ ('save in')This[types.UPDATE_CUSTOMER] (this.customer).Then (() => {This.$vux.loading.hide ()This.$vux.toast.Show ({text: 'save successful'))}).Catch (ERR => {This.$vux.loading.hide ()This.$ ({text: err.statusText, type:'warn'})Console.log (ERR)})},ClickMenuItem (index) {If (index = = = 0)This.$router.go (-1)Else if (index = = = 1)This.update ()ElseThis.$router.push ({name:'detail', params: {id: this.customerId}})}},Components: {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading, BottomMenu},Created () {Console.log ("customer information")Console.log (this.currentCustomer)This.cUstomer = Object.assign ({}, this.currentCustomer)}}



.loading-box {
    text-align: center;
    padding: 1.8rem 1.5rem;


actionPart of the code

 //Get the basic information of the customer[types.GET_CUSTOMER] ({commit}, payload) {Return new Promise ((resolve, reject)=> {Try {If (payload) {CustomerApi.getCustomer(payload).then (resp => {Commit (types.GET_CUSTOMER, (}).catch (ERR => {Commit (types.EXCEPTION, {message: JS)ON.stringify (err.response), func: types.GET_CUSTOMER})Reject (error)})} else {Commit (types.EXCEPTION, {messag)E: "customerId is undefined", func: types.GET_CUSTOMER})Reject (Error ("customerID is undefined ")))}}Catch (E) {Commit (typEs.EXCEPTION, {message: e.message, func: types.GET_CUSTOMER})Reject (e.message)}})},

mutationPart of the code

[types.GET_CUSTOMER](state, payload) {
    state.currentCustomer = payload

import actions from ‘./actions’
import mutations from ‘./mutations’
import {LocalStorage} from “../../../utils”
import storeKeys from ‘../../storeKeys’

//User status management
const state = LocalStorage.get(storeKeys.customerKey) || {

followups: [],
currentFollowup: {},
customers: [],
currentCustomer: {
    id: '',
    name: '',
    latestFollowup: {},
    extend: {},
    sex: 0,
    mobilePhone1: "",
    mobilePhone2: "",
    telePhone: "",
    status: "",
    date: "",
    projGUID: "",
    cstType: 0,
    salemanGUID: "",
    saleman: "",
    createBy: "",
    createByName: "",
    followCount: 0


//State computing attributes
const getters = {

customers: state => state.customers,
currentCustomer: state => state.currentCustomer,
currentFollowup: state => state.currentFollowup,
followups: state => state.followups,
extend: state => state.currentCustomer.extend


export default {



Answer 0:

The code old iron.

Answer 1:

Add a loading, let the data read first and then load the view

Answer 2:

I don’t know where the problem is. Look at your picture. It means commit has been executed, and vue-devtool has not caught it.

Leave a Reply

Your email address will not be published. Required fields are marked *