Vuex笔记

Vuex

vuex 是实现数据集中式状态管理的插件。数据由 vex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个

共享的数据，其它组件会同步更新。

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

环境搭建

1、vue2安装vuex3的版本，vue3安装vuex4的版本

npm i vue@3
npm i vue@4
1
2

2、创建文件夹和js文件

3、创建store对象，并暴露

// 引入vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 使用插件
Vue.use(Vuex)

// 创建三个对象，actions、mutations、state
const actions = {}
const mutations = {}
const state = {}

// 创建store对象  这个store对象是vuex插件中的老大，最核心的对象，这个对象store是用来管理actions对象、mutations对象、state对象。
export default new Vuex.Store({
    // 状态对象
  state,
  getters: {},
    // 负责更新的对象
  mutations,
    // 负责执行某个行为的对象
  actions,
  modules: {}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// main.js
import store from './store'
new Vue({
  router,
    //加上该配置项，vm以及所有vc对象上都会多一个属性： $store
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8