Vue项目中使用vuex详解

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。 Vuex采用集中式存储管理应用的所有组件的状态,将组件的共享状态抽取出来,以一个全局单例模式管理。

安装

在vue-cli工具生成的项目中，使用以下命令安装vuex：

npm install vuex --save

状态管理

Vuex中最核心的概念就是“状态管理”，即应用程序的所有数据都保存在store中。

创建store

在main.js中创建store：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    incrementCount(state) {
      state.count++;
    }
  }
});

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

其中，state中保存了应用程序的所有数据，在这里只保存了一个计数器的初始值为0。mutations中定义了修改state中数据状态的方法，这里只定义了一个计数器加1的方法，即incrementCount。

使用store

在组件中使用store，可以用以下方式：

computed: {
  ...Vuex.mapGetters(['getCount'])
},
methods: {
  ...Vuex.mapMutations(['incrementCount'])
}

其中，...是ES6语法提供的对象扩展运算符，可以让我们在对象中使用另一个对象的属性和方法。

在组件的模板中可以这样使用：

<template>
  <div>
    {{ getCount }}
    <button @click="incrementCount()">+1</button>
  </div>
</template>

其中，getCount和incrementCount分别是Vuex中定义的getters和mutations。

辅助函数

除了使用对象扩展运算符，我们还可以使用Vuex提供的辅助函数来更方便地使用store。

mapGetters

mapGetters可以将store中的getters映射到组件的computed中。

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['getCount'])
}

然后就可以在模板中使用getCount了。

mapMutations

mapMutations可以将store中的mutations映射到组件的methods中。

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['incrementCount'])
}

然后就可以在模板中使用incrementCount了。

示例

一个使用辅助函数的示例：主要的代码在MyButton.vue中。

<template>
  <button @click="incrementCount">{{ getCount }}</button>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['getCount'])
    },
    methods: {
      ...mapMutations(['incrementCount'])
    }
  }
</script>

在App.vue中引用：

<template>
  <div>
    <my-button></my-button>
    <my-button></my-button>
  </div>
</template>

<script>
  import MyButton from './MyButton.vue'

  export default {
    components: {
      MyButton
    }
  }
</script>

使用Vuex可以使得多个组件都可以访问到同一个state，从而实现数据的共享，这在有些场景下非常有用。
完整的代码可参考以下GitHub链接：
https://github.com/luolei07/Vuex-Demo