<!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
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>