Vue-cli专案介绍

今天要介绍的是最後这个使用Vue-cli制作的专案，前面我们介绍了这个专案的router和vuex部分，所以今天要把剩下没介绍的部分介绍完

先来介绍stock的制作
首先，在components中建立一个DoughuntChart资料夹，在里面的vue档先import DoughnutChart也就是我们要使用到的甜甜圈图

import { Doughnut } from "vue-chartjs";

export default {
  extends: Doughnut,
  props: ["backgroundColor", "name", "data"],

这里的extends: Doughnut就是要使用vue-chartjs里面的甜甜圈图
props就是要开窗口给在StockContent的template使用

在StockContent的template中使用v-for去读取在StockContent的Vue档中results阵列里面的所有资料

    data() {
      return {
        results:[
          {name: 'Butter', trends: [80, 20], backgroundColor : ["rgba(168, 230, 207, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'White sugar', trends: [60, 40], backgroundColor : ["rgba(220, 237, 193, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'Eggs', trends: [90, 10], backgroundColor : ["rgba(255, 211, 182, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'Baking powder', trends: [70, 30], backgroundColor : ["rgba(255, 255, 255, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'Vanilla extract', trends: [50, 50], backgroundColor : ["rgba(203, 240, 120, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'All-purpose flour', trends: [20, 80], backgroundColor : ["rgba(248, 243, 152, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'Colored sugar', trends: [90, 10], backgroundColor : ["rgba(241, 185, 99, .8)", "rgba(54, 162, 235, 0.2)"]},
          {name: 'Whipping cream', trends: [60, 40], backgroundColor : ["rgba(228, 97, 97, .8)", "rgba(54, 162, 235, 0.2)"]}
        ]
      };
    },

 <doughnut-chart
                    :data="result.trends"
                    :name="result.name"
                    :backgroundColor = "result.backgroundColor"/>

这里的:data=result.trends就是在绑定StockContent的index.vue中results的资料

在DoughuntChart的index.vue这里的datasets只有label, backgroundColor, data是可以传值进来让他改变的，而borderWidth就是已经预设好的预设值

          {
            borderWidth: 0,
            label: this.name,
            backgroundColor: this.backgroundColor,
            data: this.data,
          },
        ],

下一个sale的长条图也是一样的方法就不再说明一次罗

接下来介绍的是有没有星号的讯息判断
这是在getters里面去做判断，这里是先分类讯息的状态是在什麽状态，如果状态在isMark是true的时後他就会回传讯息里面星号的资料，那如果上面星号的状态isMark=false的时後他就会回传讯息里面不是星号的资料

export const MESSAGES = () => {
    if(state.isMark === true) {
        return state.messages.filter((message) => {
            return message.mark
        })
    }else if(state.isMark === false){
        return state.messages.filter((message) => {
             return !message.mark
        })
    }
}

接着在MainMessage的template.html用for回圈去读取gettes里面的资料，也就是讯息现在的状态所属的资料有哪些然後把它存进MESSAGES里面
<ul class="content" v-if="isMark === true" v-for="message in MESSAGES"

删除讯息的功能，利用select去判断使用者是要做MARK还是做TRASH的动作，而change中夹带event和所选取的message两个参数，event是去判断使用者点击的function，也就是去判断他的value是1还是2

 <select @change="select($event, message)">
                    <option value=null hidden selected>ACTIONS</option>
                    <option value="1">MARK</option>
                    <option value="2">TRASH</option>
                </select>

用箭头方式表达这些功能的话就会是下图这样

甜甜圈图