xinggevip

Vue2.x Cli3.x babel-preset-stage-2的安装和使用
安装babel-preset-stage-2到项目中,找到当前项目cnpm install babel-prese...
扫描右侧二维码阅读全文
08
2019/06

Vue2.x Cli3.x babel-preset-stage-2的安装和使用

安装babel-preset-stage-2到项目中,找到当前项目

cnpm install babel-preset-stage-2 --save-dev

babel配置文件babel.config.js详解

介绍

es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码
babel有提供专门的命令行工具方便转码,可以自行去了解

babel.config.js文件

module.exports = {
  presets: [
    '@vue/app',
    // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
    ["env", { "modules": false }],
    // 下面这个是不同阶段出现的es语法,包含不同的转码插件
    "stage-2"
  ]
}

详解

{
    // 此项指明,转码的规则
    "presets": [
        // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
        ["env", { "modules": false }],
        // 下面这个是不同阶段出现的es语法,包含不同的转码插件
        "stage-2"
    ],
    // 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
    "plugins": ["transform-runtime"],
    // 下面指的是在生成的文件中,不产生注释
    "comments": false,
    // 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
    "env": {
        // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
        "test": {
            "presets": ["env", "stage-2"],
            // instanbul是一个用来测试转码后代码的工具
            "plugins": ["istanbul"]
        }
    }
}

使用

store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state:{
        products:[
            {
              name:"马云",
              price:200
            },
            {
              name:"马化腾",
              price:100
            },
            {
              name:"马冬梅",
              price:50
            },
            {
              name:"马蓉",
              price:10
            }
          ]
    },
    getters:{
        soleproducts:(state) =>{
            var soleproducts = state.products.map((product) =>{
                return {
                    name:"**" + product.name + "**",
                    price:product.price
                }
            });
            return soleproducts;
        }
    },
    mutations:{
        changedata:(state,payload) =>{
            // setTimeout(function(){
                return state.products.forEach(element => {
                    element.price -= payload;
                });
            // },3000);
        }
    },
    actions:{
        achangedata:(context,payload)=>{
            setTimeout(function(){
                context.commit('changedata',payload);
            },3000)
        }
    }

})

Productlistone.vue

<template>
  <div class="productlistone">
    <h1>福布斯排行榜</h1>
    <ul v-for="product in soleproducts" :key="product.value">
        <li>
          <span class="name">{{product.name}}</span>
          <span class="price">${{product.price}}</span>
        </li>
    </ul>
    <button v-on:click="caozuo">getters操作</button>
    <button v-on:click="mcaozuo(10)">mutations操作</button>
    <button v-on:click="achangedata(4)">actions操作</button>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'

export default {  
    // props:['products'],
    
    computed:{
      // products(){
      //   return this.$store.state.products;
      // },

      /*

      soleproducts(){
        // var soleproducts = this.$store.state.products.map((product) =>{
        //     return {
        //       name:"**" + product.name + "**",
        //       price:"**" + product.price + "**"
        //     }
        // });
        // return soleproducts;

        // 执行store中的方法获取数据----getters
        return this.$store.getters.soleproducts;
      },

      */
      ...mapGetters([
        "soleproducts"
      ])
    },
    methods:{
      ...mapActions([
        "achangedata"
      ]),

      // 获取store数据----state
      caozuo:function(){
        this.$store.state.products.forEach(element => {
          element.price -= 1;
        });
      },

      

      // 执行store中的方法处理数据----mutations
      mcaozuo:function(value){
        this.$store.commit('changedata',value);
      },

      
      /*

      // 异步操作----action操作
      acaozuo:function(value){
        this.$store.dispatch('achangedata',value);
      }

      */
    }
}
</script>
Last modification:June 9th, 2019 at 10:16 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment