1 vuex的使用
-在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式
的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
-使用步骤:
1 新建store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 10
},
mutations: {
add_mu(state, i) {
state.num += i
}
},
actions: {
add(context, i) {
context.commit('add_mu', i)
}
},
})
2 在组件中使用变量
拿值:this.$store.state.num
修改值:三种方式
-直接:this.$store.state.num += 1
-间接:this.$store.commit('add_mu',3)
-间间接:this.$store.dispatch('add',10)
3 任意组件都都可以使用,实现了组件间通信
组件
<template>
<div class="hello">
<button @click="handleAdd">增加购物车</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
handleAdd() {
this.$store.state.num += 1
this.$store.dispatch('add', 10)
this.$store.commit('add_mut', 3)
}
}
}
</script>