今天完成的事情：今天也学习了一下vue的小技巧
明天计划的事情：继续后续的学习
遇到的问题：实际操作太少还是需要更多的练习
收获：

vuex 实现组件之间数据的传递

根据 state 可以实时的获取到数据

安装

npm install vuex --save

在 src 文件夹中新建一个 stroe 文件夹，并在目录下新建一个 index.js 文件(已有的话请忽略)，index.js 文件编辑如下

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({

    state: {

        formData: {} // 企业提交数据表单对象

    }

});

export default store;

在 src 目录下的 main.js 文件中引入 vuex 文件，并在实例化时添加配置

import Vue from 'vue';

import App from './App';

import router from './router';

import store from './store'; // 引入 vuex

Vue.config.productionTip = false;

Vue.http.options.emulateJSON = true;

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store, // 需要在添加

  components: { App },

  template: '<App/>'

});

• 之后就可以直接在需要的组件中直接引用，引用具体示例如下
• 
• 
• 控制台成功输出
• 

• eslintrc.js 文件 rules 增加设置

// add your custom rules here

  rules: {

    // allow async-await

    'generator-star-spacing': 'off',

    // allow debugger during development

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    // 空格关闭

    'no-tabs': 'off',

    // 缩进为0

    indent: 0,

    'space-before-function-paren': 0, // 清除  function() {} 这样写报错的规则

    quotes: 0 // 清除 "" 这样写报错的规则

  }

 vue 表单操作

<main id="app">

        <form class="mian__form" @submit.prevent="submit">

            <ul>

                <li>

                    <div class="form__til">企业名称</div>

                    <div class="form__input">

                        <input id="companyName" type="text" placeholder="" required v-model="userData.companyName">

                    </div>

                </li>

                <li>

                    <div class="form__til">企业人数</div>

                    <div class="form__input">

                        <input id="peopleNumber" type="number" placeholder="" required v-model="userData.peopleNumber">

                    </div>

                </li>

                <li>

                    <div class="form__til">号码归属地</div>

                    <div class="form__select select-two">

                        <select name="tellPlace" id="tellPlace" required  onchange="provincechange(this.selectedIndex)" v-model="userData.tellPlace">

                            <option>请选择省份</option>

                        </select>

                        <br/>

                        <select name="tellCity" id="tellCity" required v-model="userData.tellCity">

                            <option>请选择城市</option>

                        </select>

                    </div>

                </li>

                <li>

                    <div class="form__til">号码制式</div>

                    <div class="form__select">

                        <select id="tellFormat" v-model="userData.tellFormat" required>

                            <option value="TD-LTE/TD-SCDMA">TD-LTE/TD-SCDMA</option>

                            <option value="FDD-LTE/WCDMA">FDD-LTE/WCDMA</option>

                            <option value="TD-LTE/LTE FDD/CDMA2000">TD-LTE/LTE FDD/CDMA2000</option>

                        </select>

                    </div>

                </li>

                <li>

                    <div class="form__til">开通功能</div>

                    <div class="from__checkbox">

                        <div class="checkbox__inner">

                            <input id="functionAll" type="checkbox" value="企业总机" v-model="userData.openFun">

                            <label for="functionAll">企业总机</label>

                        </div>

                        <div class="checkbox__inner">

                            <input id="functionTell" type="checkbox" value="电话会议" v-model="userData.openFun">

                            <label for="functionTell">电话会议</label>

                        </div>

                        <div class="checkbox__inner">

                            <input id="functionCompany" type="checkbox" value="集团V网" v-model="userData.openFun">

                            <label for="functionCompany">集团V网</label>

                        </div>

                    </div>

                </li>

                <li>

                    <div class="form__til">联系人</div>

                    <div class="form__input">

                        <input id="Contacts" type="text" placeholder="" required v-model="userData.Contacts">

                    </div>

                </li>

                <li>

                    <div class="form__til">联系电话</div>

                    <div class="form__input">

                        <input id="contactTell" type="number" placeholder="" maxlength="11" required v-model="userData.contactTell">

                    </div>

                </li>

                <li>

                    <button class="submit-btn" id="submitBtn" type="submit">提交</button>

                </li>

            </ul>

        </form>

    </main>

js部分

var vm = new Vue({

    el:'#app',

    data:{

        userData:{

            companyName:'',

            peopleNumber:'',

            tellPlace:'',

            tellCity:'',

            tellFormat:'',

            openFun:[],

            Contacts:'',

            contactTell:''

        },

        checkedNames:[]

    },

    methods:{

        submit:function(){

            var me = this;

            var data = JSON.stringify(me.userData);

            console.log(data);

        }

    }

});