1、概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2、何时使用
多个组件需要共享数据时
3、搭建vuex环境
注意:vue2中,要用vuex的3版本,vue3中,要用vuex的4版本,
(1)、安装vuex
npm i vuex@3
(2)、创建文件:src/store/index.js
// 该文件用于创建Vuex中最为核心的store import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 应用Vuex插件 Vue.use(Vuex) // 准备actions —— 用于响应组件中的动作 const actions = { } // 准备mutations —— 用户操作数据(state) const mutations = { } // 准备state —— 用于存储数据 const state = { } // 创建并暴露store export default new Vuex.Store({ actions, mutations, state, })
(3)、在main.js中创建vm时传入store配置项
.... // 引入store import store from './store/index' .... new Vue({ render: h => h(App), store, // Vuex必须配置store }).$mount('#app')
添加图解:
1、Actions,Mutations、State都归Store管理,actions中可以处理一些后端交互和异步请求
2、vue 组件可以跨过actions直接和mutations交互