Vuex 教程

默认，是学会了 Vue 的搭建，默认熟悉 Vuex 是什么，下面用代码介绍 Vuex 的知识点。

我要实现的功能是，两个组件一个实现加，一个实现减，这样可以很好的说明 Vuex 的作用，管理公共数据。

在搭建好的 Vue 项目组件文件夹下，新建两个 Vue 文件，CountAdd 与 CountReduce ，然后在 src 文件夹下新建文件夹 vuex，vuex 下新建 store 文件，目录如下：

vuex.png

完成了准备工作，现在开始写代码：

HelloWorld.Vue 引入组件：

<template>
  <div>
    <CountAdd></CountAdd>
    <CountReduce></CountReduce>
  </div>
</template>

<script>
import CountAdd from './CountAdd'
import CountReduce from './CountReduce.vue'
export default {
  components: {
    CountAdd,
    CountReduce
  }
}
</script>

store.js ：

var state = {
  count: 0
}

var mutations = {
  add (state) {
    state.count++
  },
  reduce (state) {
    state.count--
  }
}

export default new Vuex.Store({
  state,
  mutations
})

CountAdd.vue

<template>
  <div>
    <h3>{{count}}</h3>
    <p>
      <button @click="add">+</button>
    </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState, mapMutations} from 'vuex'
export default{
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['add', 'reduce'])
  },
  store
}
</script>

CountReduce.vue

<template>
  <div>
    <h3>{{count}}</h3>
    <p>
      <button @click="reduce">-</button>
    </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState, mapMutations} from 'vuex'
export default{
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['add', 'reduce'])
  },
  store
}
</script>