【Vuex】Vuex搭建及多组件共享

Vuex是什么

• 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件(Vue.use(vuex)),对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信.
• Github地址: vuex官方地址

什么时候使用Vuex

• 多个组件依赖于同一状态
• 来自不同组件的行为需要变更同一状态

vuex4版本只支持vue3.0,所以在vue2.0中使用,
需要npm i vuex@3 指定版本

搭建vuex环境

1. 创建文件:

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: actions,
  mutations: mutations,
  state, //简写形式
});

2. 在main.js中创建vm时传入store配置项