vuex的使用

1 vuex的使用

1 vuex的使用

store/index.js

-在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式
的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信-使用步骤：1 新建store/index.jsimport 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() {// 让状态管理器中：state的值加1// 方式1：直接操作，不好this.$store.state.num += 1// 方式2：先dispatch触发action的方法----》再commit触发mutations----》// 再mutations中修改statethis.$store.dispatch('add', 10)// 方式3：this.$store.commit('add_mut', 3)}}
}
</script>