VueX的使用------简单的问卷调查应用

 

 

先说明一下这个demo，这个demo出自《vue.js实战》进阶篇开头的一个作业。有些功能目前没有实现，比如当前页不满足验证要求，下一步的按钮就不能使用。这个思路是有的：加一个:disabled="XXX'的属性即可，但是目前急着找工作，有空的时候，再把这个功能给加上，以及在这个基础上不断完善这个Webapp的功能。

demo的本意是做一个比较完整的dany单页面应用，但是登录注册模块也没有全部做完，只是一个半成品。本来也没打算放上来，但是自己写技术文档已经有一个月的时间了，想了想，自己迟早还是要迈出这一步的，所以，这个半成品我也就放上来了。

 

目录结构如下图

：

这里的代码都很简单，我贴上来，玩过vue一段时间的人想必都能看懂。

//helloWord.vue

<template>
  <div class="hello">
    <div>
      <el-header>
      </el-header>
      <el-main >
        <div v-show="count===1">
          <Que1></Que1>
        </div>
        <div v-show="count===2">
          <Que2></Que2>
        </div>
        <div v-show="count===3">
          <Que3></Que3>
        </div>
      </el-main>
    </div>
     <div>
       <el-footer >
         <el-row type="flex" justify="space-around">
             <el-col :span="2" v-if="count===2|count===3">
               <Button2></Button2>
             </el-col>
           <el-col :span="2">
             <Button1 ></Button1>
           </el-col>
           <el-col :span="5">
             <Button3 @reload="zon"></Button3>
           </el-col>
         </el-row>
       </el-footer>
     </div>
  </div>
</template>

<script>
  import Button1 from './pages/Button1'
  import Button2 from './pages/Button2'
  import Button3 from './pages/Button3'
  import Que1 from './Main/Que1'
  import Que2 from './Main/Que2'
  import Que3 from './Main/Que3'


export default {
    //注入依赖
    inject:['reload'],
    name: 'HelloWorld',
    data () {
      return {
      }
    },
    components: {
      Button1,
      Button2,
      Button3,
      Que1,
      Que2,
      Que3,
    },
    computed:{
      count(){
        return this.$store.state.count;
      }
    },
    methods:{
       zon(){
         this.reload()
       },
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .el-header, .el-footer {
    text-align: center;
    height: 190px;
    border: solid 1px red;
  }
  .el-main {
    background-color: #E9EEF3;
    height: 590px;
    border: solid 1px red;
  }

</style>

page文件夹下有三个按钮，功能都特别简单。

Button1.vue

<template>
  <div>
    <el-button  @click="handleOne">下一步</el-button>
  </div>
</template>

<script>
    export default {
        name: "Button1",
        methods:{
          handleOne(){
            this.$store.commit('one');
          },
        }
    }
</script>

Button2.vue

<template>
  <div>
   <el-button @click="handleOne">上一步 </el-button>
  </div>
</template>
<script>
    export default {
        name: "Button2",
        methods:{
        handleOne(){
          this.$store.commit('two')
        },
      }
    }
</script>

Button3.vue

<template>
  <div>
    <el-button  @click="reload">重置</el-button>
  </div>
</template>

<script>
    export default {
        name: "Button3",
      methods:{
        reload(){
          this.$emit('reload');
        }
      }
    }
</script>

前两个按钮的功能就是触发store.js中数据的变化，从而形成页面跳转的效果。最后一个按钮的功能是为了实现初始化的功能。前两个按钮的功能在methods中已经很清楚了。就是触发store.js中的mutations。

store.js代码如下：设置count的初始值是1，这样，页面初始显示的就是第一页，然后随着按钮点击事件的发生，就会不断切换到下一页。当然，这里我做了限制，因为我总共就写了三个问卷，所以我对count做了限制。

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

export default new vuex.Store({
  state:{
    count:1
  },
  mutations:{
    one(state){
      if(state.count===3){
        return
      }
      state.count++;
    },
    two(state){
      if(state.count===1){
        return
      }
      state.count--;

    }
  }
})

设置count的初始值是1，这样，页面初始显示的就是第一页，然后随着按钮点击事件的发生，就会不断切换到下一页。当然，这里我做了限制，因为我总共就写了三个问卷，所以我对count做了限制。

 if(state.count===3){
        return
      }


 if(state.count===1){
        return
      }

当然，vuex的下载方式这里也会给上

npm install --save vuex

最后一个清空数据，重置为原始状态的代码涉及到app.vue这个根组件了

先上代码：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
      name: 'App',
      provide(){
        return{
          reload:this.reload
        }
      },
      data(){
        return{
          isRouterAlive:true
        }
      },
      //通过声明reload方法，控制router-view的显示或隐藏
      // 从而控制页面的再次加载
      methods:{
        reload(){
          this.isRouterAlive=false;
          this.$nextTick(function(){
            this.isRouterAlive=true
          })
        }
      },

}
</script>

<style>
#app {
  position: relative;
  width: 100%;
  height: 100%;
  /* width: 1928px;
   height: 1080px;*/
  overflow: hidden;
}
</style>

这里和一般的vue项目不同，这里多了一些代码。这个reloadfang方法，最后会在helloWord.vue中被注入，细心的小伙伴一定已经发现了。

哦，最后，忘了附加上三个问卷de的页面代码了。代码如下：

Que1.vue

<template>
  <div>
    <p class="question">1.<span>请问您的性别是</span>?</p>
    <el-radio-group v-model="radio2" class="choice">
      <el-radio :label="3">男</el-radio>
      <el-radio :label="6">女</el-radio>
      <el-radio :label="9">保密</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
    export default {
        name: "Que1",
        data () {
      return {
        radio2: 3
      };
    }
    }
</script>

<style scoped>
  .question{
    text-align: left;
  }
  .choice{
    margin-top: 10%;
  }
</style>

Que2.vue

template>
  <div>
    <p class="question">2.<span>请选择您的兴趣爱好：</span>?</p>
    <el-checkbox :indeterminate="isIndeterminate" 
       v-model="checkAll" 
       @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  const cityOptions = ['看书', '游泳', '跑步', '看电影','听音乐'];
    export default {
        name: "Que2",
      data() {
        return {
          checkedCities: ['看书', '看电影'],
          checkAll: false,
          cities: cityOptions,
          isIndeterminate: true
        };
      },
      methods: {
        handleCheckAllChange(val) {
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
      }
    }
</script>

<style scoped>
  .question{
    text-align: left;
  }
  .check{
    width: 100%;
    margin-left: 0;
  }
</style>

Que3.vue

<template>
  <div>
    <p class="question">3.<span></span>请介绍一下自己</p>
    <textarea  v-model="text" placeholder="输入。。。" class="one"></textarea>
    <p>输入的内容是：</p>
    <p style="white-space:pre">{{text}}</p>
  </div>
</template>

<script>
    export default {
        name: "Que3",
        data () {
        return {
          text:''
        }
      },
    }
</script>

<style scoped>
  .question{
    text-align: left;
  }
.one{
  width:100%;
  height: 100px;
}
</style>

最后，如果大家对我的代码有不明白的，可以直接下载源码。https://github.com/Scarlete/web-Production/tree/master/