Vuex 使用及简单实例(计数器)

什么是Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它可以解决多个组件共享状态的问题，让我们更好的管理各个组件之间的状态和数据。

Vuex的核心概念

Vuex先简明扼要的介绍一下它的核心概念，下面将对这些概念进行进一步的解释。

• State: Vuex的状态管理模式仓库是由一个全局单例对象组成，称为state。

• Getter: 可以从state中导出派生状态的函数称为getter。我们可以通过getter将公共状态组合成可重用的逻辑单元，并可以在多个组件中使用。

• Mutation: 更改state状态的唯一方法称为mutation。Mutation必须是同步函数，异步操作必须通过action。

• Action: action类似于mutation。唯一的区别在于action是异步的，并且可以包含任意异步操作。

Vuex的简单实例

下面我们来通过一个简单的计数器实现对Vuex的初步使用。

Step1：安装vuex

在Vue项目的根目录下使用以下命令安装Vuex：

npm install vuex --save

Step2：创建Vuex实例

在项目的src文件夹中，新建一个store文件夹，在store文件夹中创建一个index.js文件，并在其中创建Vuex实例，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
})

export default store

Step3：在Vue项目中使用Vuex

在main.js中引入Vuex实例：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

Step4：创建计数器

在App.vue中创建一个计数器，并使用Vuex实现计数器的加减功能，代码如下：

<template>
  <div id="app">
    <h1>{{count}}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
export default {
  computed: mapState([
    'count'
  ]),
  methods: mapMutations([
    'increment',
    'decrement'
  ])
}
</script>

在以上代码中，我们通过mapState绑定了state中的count变量，并通过mapMutations绑定了mutations中的increment和decrement方法。

现在我们已经成功实现了一个简单的计数器，使用Vuex来管理状态，实现数据共享，开发更高效。