vuex初识

Count.vue

<template>
<div>
<h2>{{msg}}</h2><hr/>
<h3>
{{$store.state.count}}
</h3>
<p>
<button @click="$store.commit(‘add‘)">+</button>
<button @click="$store.commit(‘reduce‘)">-</button>
</p>
</div>
</template>
<script>
import store from ‘../vuex/store‘;
export default {
data(){
return{
msg:‘hello Vuex‘
}
},
store
}
</script>

router/index.js

// 引用模板
import Count from ‘../components/Count.vue‘

// 配置路由
export default
[{
path:‘/count‘,
component:Count
}]

vuex/store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

const state={
count:1
}
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
export default new Vuex.Store({
state,
mutations
})