Vuex实现多组件数据共享（状态管理）

state

主要用于数据的注册，类似于data

方式：

// 注册
export default new Vuex.Store({
  state: {
    count: 100
  }
})

// 在组件中使用
// 方式一
// 通过$store.state.count调用即可

// 方式二
// 通过在组件中引入mapState
<script>
import { mapState } from 'vuex'
export default {
  created() {
    console.log(this.count)
  },
  computed: {
      // 拓展方式，传入数组参数方便引入多个state参数
    ...mapState(['count'])
  }
}
</script>

mutations

主要用于方法注册。类似于methods

方式

// 注册
export default new Vuex.Store({
 mutations: {
    increment(state, num) {
      state.count += num
    }
  }
})

// 在组件中使用
// 方式一
// 通过$store.commit('increment',20)调用即可

// 方式二
// 通过在组件中引入mapState

<template>
  <div @click="increment(20)">商家{{ count }}</div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>