刚刚开始学vuex，想使用store.dispatch的简化版本，引入了babel，还是不行，是什么原因啊？
发布于 7 年前 作者 QuoniamYIF 17960 次浏览 来自 问答 
<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <!-- <div id="app">
      <counter></counter>
    </app> -->
    <div id="app">
      <p>{{ count }}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')
    </script>
    <script src="js/vendor/vue.min.js"></script>
    <script defer src="js/vendor/material.min.js"></script>
    <script src="js/plugins/vuex.min.js"></script>
    <script src="js/plugins/babel-core/browser.js"></script>
    <script type="text/babel">
      import { mapActions } from 'vuex'
      
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
        	increment: state => state.count++,
          decrement: state => state.count--
        },
        actions: {
          increment: ({ commit }) => commit('increment'),
          decrement: ({ commit }) => commit('decrement')
        }
      })

      const app = new Vue({
        el: '#app',
        computed: {
          count () {
      	    return store.state.count
          }
        },
        methods: {
          mapActions([
            'increment',
            'decrement'
          ])
        }
      })
    </script>
</body>

</html>

执行结果: browser.js:3 Uncaught ReferenceError: exports is not defined

3 回复

1.const，increment(state) {…}，以及箭头函数和参数解构({ commit }) => commit(‘increment’),这些都是ES6的写法，需要babel进行转换成ES5的

2.new Vue()里面的computed以及methods的mapGetters和mapActions你得从vuex里面导出来吧！官网上的先import {mapGetters, mapActions} from “vuex”，这也是ES6的写法<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

@BubblyPoker 引入了babel 还不行 是什么原因啊？

@QuoniamYIF 直接在浏览器端编译ES6，我没这么试过。不过我建议用webpack学习Vue，方便很多的<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

回到顶部