Vue--Vuex-CSDN博客

本文链接：https://blog.csdn.net/q4451728/article/details/127490452

本文介绍了Vuex的状态管理库，对比了它与全局事件总线的区别，强调了Vuex在数据共享和管理上的优势。详细讲解了Vuex的工作原理，并通过示例展示了如何安装配置Vuex，包括在Vue2项目中安装Vuex3的步骤，以及在main.js和store/index.js中的基本配置。

摘要由CSDN通过智能技术生成

Vuex

概览
Vuex工作原理图
安装配置

API文档：https://vuex.vuejs.org/zh/

概览

在需要对数据（状态）进行共享，使其具有修改功能时候，全局事件总线与Vuex的实现是不一样的。
在这里插入图片描述

全局事件总线需要给组件设置绑定和$emit，在很多很多组件的时候会比较乱。
在这里插入图片描述

Vuex是将需要共享的数据（状态）放到Vuex内，其他不需要共享的可以放在组件内，从而达到共享的目的。

Vuex工作原理图

在这里插入图片描述
这里在不需要发送ajax请求的情况下也可以从VC直接commit到Mutations

安装配置

由于2022年2月开始自动安装vuex4，对应vue3，因此要在vue2情况下安装vuex3，需要指定版本号
npm i vuex@3
在src下创建文件夹store，配置文件如果是index.js之后路径就只需要为store
index.js

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

Vue.use(Vuex)
const actions = {}
const mutations = {}
const state = {}
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在index.js中use Vuex，避免在main.js由于没有在store导入之前use而报错
main.js

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import store from './store'

Vue.config.productionTip = false
Vue.use(VueResource)

new Vue({
  render: h => h(App),
  store,
  beforeCreate() {
    // 在Vue的原型对象上添加个$bus
    Vue.prototype.$bus = this
  }
}).$mount('#app')