vuex初识
Posted 简单就好zyx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
})
以上是关于vuex初识的主要内容，如果未能解决你的问题，请参考以下文章