https://vuex.vuejs.org/zh/guide/
仔细读上面官网的介绍就会很清楚,store,state,mutation的关系
根据官网写了一个很简单的小例子,只用到了store,state,mutaion,无需安装vue,vuex,只用引入。
在这里,没有用模块化开发,是组件化开发。小小例子,不成敬意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<!-- vuex 需要promise的支持 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
Vue.use(Vuex)
const store = new Vuex.Store({
//可以通过store.state来获取状态对象
state:{
count:0
},
//可以通过commite触发状态改变 ex. store.commit('increment')
mutations:{
increment(state){
state.count++
}
}
})
//vue实例中要有创建好的store
new Vue({
el:"#box",
store:store,
template:`
<button @click="increment">赞 {
{this.$store.state.count}}</button>`,
methods:{
increment(){
this.$store.commit('increment')
}
}
})
</script>
</body>
</html>