vuex的使用

1 vuex的使用

1 vuex的使用

store/index.js

-在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() {
      // 让状态管理器中：state的值加1

      // 方式1：直接操作，不好
      this.$store.state.num += 1

      // 方式2：先dispatch触发action的方法----》再commit触发mutations----》
      // 再mutations中修改state
      this.$store.dispatch('add', 10)

      // 方式3：
      this.$store.commit('add_mut', 3)
    }
  }
}
</script>