vuex
1.概念:专门在Vue中实现集中式状态(数据)管理的vue插件,对vue应用中多个组件的共享状态进行集中式读/写,
并且也是组件间的通信方式,且适用于任意组件间的通信。
2.使用场景:1.多个组件依赖于同一状态(数据);
2.来自不同组件的行为需要变更同一状态(数据);
vue2使用vuex3版本, npm i vuex@3
vue3使用vuex4版本,版本不对应无法安装
3.搭建vuex环境
1.创建文件:src/store/index.js
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); //actions对象——响应组件中用户的动作 const actions = {}; //mutations对象——修改state中的数据 const mutations = {}; //state对象——保存实时的数据 const state = {};
//getter用于对state中的数据进行加工
const getter = {}; //创建并暴露stote export default new Vuex.Store({ actions, mutations, state, });
2.在main.js中创建vm并传入store配置项
... import store from "./store"; ... new Vue({ render: (h) => h(App), store, }).$mount("#app");