从0到1实现Vuex，原来如此简单

2023-12-14 08:11:09

从0到1实现一个简易版Vuex

前言

在Vue.js应用中，我们经常需要管理一些全局共享的数据，比如用户信息、购物车内容等。为了方便管理这些数据，Vuex应运而生。Vuex是一个专为Vue.js设计的集中式状态管理工具，它可以帮助我们管理应用程序中的状态数据，并使组件能够共享数据。

搭建Vuex项目

首先，我们需要创建一个Vuex项目。我们可以使用Vue CLI工具来快速搭建项目。在终端中输入以下命令：

vue create my-vuex-app

创建Vuex仓库

接下来，我们需要创建一个Vuex仓库。在项目的src目录下，创建一个名为store的目录，并在该目录下创建一个index.js文件。在index.js文件中，我们将编写Vuex仓库的代码。

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

在上面的代码中，我们创建了一个名为store的Vuex仓库，并在仓库中定义了一个名为count的状态。count是一个数字，它表示应用程序中的某个状态。我们还定义了一个名为increment的mutation，它可以将count的值加1。

使用Vuex仓库

现在，我们需要将Vuex仓库挂载到Vue实例上。在main.js文件中，我们可以这样做：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

在上面的代码中，我们通过Vue.use()方法将Vuex仓库挂载到了Vue实例上。这样，我们就可以在Vue组件中使用Vuex仓库了。

在组件中使用Vuex仓库

在组件中，我们可以通过this.$store属性来访问Vuex仓库。例如，在App.vue组件中，我们可以这样做：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>