vuex2.0基本使用---1、初始版

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、启动项目就可以查看效果了