vuex的概念和在使用vuex出错以及解决方法

Vuex

1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.出错

首先多数小伙伴们可能刚刚开始都会默认去main.js文件里面用import引入vuex插件，并且直接用vue.use(vuex)去使用它，然后在后面再次引入store.js文件，以为会按照顺序从上往下来依次读取执行，其实不对，最先会执行所有的import引入的文件，然后再会读取并且执行其他的，所以本来都是写了，结果却是错误的，就如同出现下面的问题

4. 解决方法

可以建一个store文件夹，里面新建一个js文件，把vuex引入这里面并且使用，然后再在main.js里引入store文件

store.js

//该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
    // 准备actions--用于响应组件中的动作
const actions = {}
    // 准备mutations--用于操作数据（state）
const mutations = {}
    // 准备mutations--用于存储数据
const state = {}

// 创建并暴露（导出）store
export default new Vuex.Store({
    actions,
    mutations,
    state

})

 main.js 

// 该文件是整个项目的入口文件
// 引入vue
import Vue from 'vue'
// 引入app组件，他是所有组件的父组件，总汇合
import App from './App.vue'
// 引入store
import store from './store'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建vue实例对象
new Vue({
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    }

}).$mount('#app')

最后刷新就OK了