Vue笔记 Vuex

一、概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且应用于任意组件间通信。

二、何时使用？ 多个组件需要共享数据时。

三、Vuex的原理图

四、搭建Vuex环境：

Vue2要安装Vuex3版本，Vue3要安装Vuex4版本

1、终端输入：npm i vuex@3 就可以安装3版本，需要在main.js文件里引入vuex，如下：

使用插件：

 2、在src中新建一个store文件夹，里面新建一个index.js文件

 

 文件里写：

//该文件用于创建Vuex中最核心的store

//引入Vuex
import Vuex from 'vuex'
//准备actions-用于响应组件中的动作
const actions = {}
//准备mutations-用于操作数据（state）
const mutations = {}
//准备state-用于存储数据
const state = {}

//创建并暴露（导出）store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

再在main.js中引入store

 创建vm中：

 会出现错误：

但是如果先使用Vue.use(Vuex),再引入store，也会出现错误，因为import会优先编译，所以需要在index.js文件中写Vue.use(Vuex)，需要先引入Vue。最后main.js文件如下图所示：

此时，main.js文件里只需要引入store 

 

五、环境最终文件：

1、index.js

//该文件用于创建Vuex中最核心的store

//引入Vue核心库
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,
})

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

......
//引入store
import store from './store'

......

//创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})