Hooke / demo-vue-vuex

Go to a project
Toggle navigation Toggle navigation pinning
Hooke
0fbe3348 1 parent db7724aa

在 vue 组件中获得 vuex 状态

Inline Side-by-side
Showing 4 changed files with 79 additions and 0 deletions
/node_modules
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
Vue.component('counter',Counter)
const app = new Vue({
el: '#app',
store,
computed: {
count() {
return store.state.count
}
},
methods: {
increment() {
store.commit('increment')
},
decrement() {
store.commit('decrement')
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuex</title>
</head>
<body>
<div id="app">
<counter></counter>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
<script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
<script src="./node_modules/vuex/dist/vuex.js" charset="utf-8"></script>
<script src="./app.js" charset="utf-8"></script>
</body>
</html>
{
"name": "demo-vue-vuex",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@gitlab.kmlab.com:hooke1234/demo-vue-vuex.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.0.3",
"vuex": "^2.0.0"
}
}