Vuex实现原理（学习记录版）

---

一、Vuex是什么？

Vuex是一个为Vue.js创建的状态管理工具，这个状态管理工具主要包含以下几个部分：

• state：数据源-驱动应用使用的数据
• view：通过声明的方式将state映射到视图
• action：方法修改state中的状态
  
  每一个vuex的使用的核心其实是仓库（store），store就相当于一个容器，用于存储应用中的大部分状态（state）
  在代码中，拥有类似功能的还有全局变量，但是Vuex与全局变量还是存在不同的点：
• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。(也就是所谓的MVVM)
• 不能直接修改store中的状态，想要修改store中的状态只能通过Vuex中的mutations
  官方的Vuex工作原理图：
  

二、详细使用

1.安装Vuex

npm install vuex@next --save
yarn add vuex@next --save

2.创建相应的store文件

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () { // state用于存储状态值
    return {
      count: 0
    }
  },
  mutations: { // mutations中是对state进行操作的方法
    increment (state) {
      state.count++
    }
  },
  actions: { // actions中用于存储对应actions，可使用dispatch调用
   addCount() {
   	commit('increment') // 调用mutations时使用commit
   }
  }
})

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

在Vue组件中通过使用this.$store来访问store实例

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

---