1、初始化项目:vue init webpack vuex_demo
2、安装vuex:npm install vuex -D
3、在src文件夹里新建一个vuex文件夹
4、在vuex文件夹里新建一个store.js的文件
5、在store.js里写上以下代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {
increment: (context) => {
context.commit('INCREMENT')
},
decrement: (context) => {
context.commit('DECREMENT')
}
}
const mutations = {
INCREMENT: state => state.count++,
DECREMENT: state => state.count--
}
var state = {
count: 0
}
export default new Vuex.Store({
actions: actions,
mutations: mutations,
state: state
})
6、在main.js里加上以下代码:
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
7、在components文件夹里新建一个Count.vue组件
8、在Count.vue组件写上以下代码:
<template>
<div>
<p>{{ count }}</p>
<p>
<button @click="increment()">+</button>
<button @click="decrement()">-</button>
</p>
</div>
</template>
<script>
export default {
name: 'Count',
methods: {
increment () {
this.$store.commit('INCREMENT')
},
decrement () {
this.$store.commit('DECREMENT')
}
},
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
9、启动项目就可以查看效果了