Vue(Vuex状态集中管理仓库)

Vuex是一个专为Vue.js开发的状态管理模式，它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。

 

这种状态自管理应用分包含以下几个状态。

 1、state驱动数据的数据源

 2、view以声明方式将state映射到视图

 3、actions响应在view上用户输入导致的状态变化。

 搭建Vuex环境方式

&注：在Vux3更新后，Vux也随之更新到Vuex@4的版本，Vux4版本只适用于Vue3，如果使用的Vue2，必须选择相应的Vuex3版本进行适配。

安装Vuex

PS D:\Technical Documents\Vue\vues> npm i vuex@3   

导入Vuex(main.js)

import Vue from 'vue';
import App from './App.vue';
import Vuex from 'vuex';
import Store from './store/index'
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  Store,
  beforeCreate() {
    Vue.prototype.$bus = this   //安装全局事件总线
  }
}).$mount('#app')

创建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
})