- 首先先创建一个store.js
安装vue,vuex什么的就不说了
这是一个仓库
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
})
- 创建一个Count.vue
这个组件使用store仓库
<template>
<div>
<h3>{{$store.state.count}}</h3>
<hr/>
<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>
<style>
</style>
- 在主页面中使用就可以实现一个加减的效果
代码中需要注意的点用“//”标注了出来