Vuex ——详细介绍

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为：将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。

一般情况下，我们会在 Vuex 中存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，这些状态信息，我们可以放在统一的地方，对它进行保存和管理。

Vuex 插件的安装

npm install --save vuex@3.6.2

注意版本问题：vue 的 2.x 版本对应 vuex 的 3.x 版本，vue 的 3.x 版本对应 vuex 的 4.x 版本

在 src 目录下新建 store 文件夹，创建 index.js文件引入、安装、创建并导出Vuex对象。

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
  state:{
    counter:1000
  },
  mutations:{

  },
  actions:{

  },
  getters:{

  },
  modules:{
    
  }
})
//3.导出使用
export default store

和 vue-router 的使用方式一样，在 main.js 文件中挂载使用

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

store 对象中存放的东西是固定的，主要有：state、mutations、actions、getters、modules

下图是官方给出的vuex状态管理图例

Vuex的基本使用

安装浏览器插件：devtools 方便调试

state：存放需要共享的状态信息，使用时通过 $store.state.counter 即可拿到状态信息。

对 state 的状态信息进行修改：先拿到 store 对象，然后通过commit 提交 mutations 中的方法。