Vuex#

概念#

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

1.是什么：

vuex 是一个 vue 的 状态管理工具，状态就是数据

大白话是一个插件，可以帮我们**管理vue 通用的数据(多组件共享的数据)**

2.场景:

① 某个状态在 很多个组件 来使用(个人信息)

② 多个组件 共同维护 一份数据(购物车)

3.优势:

① 共同维护一份数据，数据集中化管理

② 响应式变化

③ 操作简洁(vuex提供了一些辅助函数）

何时使用？#

多个组件需要共享数据时

搭建vuex环境#

安装vuex

1
npm i vuex@3 //vue2 安装3版本  vue3安装4版本

创建文件：src/store/index.js

1
//引入Vue核心库
2
import Vue from 'vue'
3
//引入Vuex
4
import Vuex from 'vuex'
5
//应用Vuex插件
6
Vue.use(Vuex)
7

8
//准备actions对象——响应组件中用户的动作
9
const actions = {}
10
//准备mutations对象——修改state中的数据
11
const mutations = {}
12
//准备state对象——保存具体的数据
13
const state = {}
14

15
//创建并暴露store
16
export default new Vuex.Store({
17
  actions,
18
  mutations,
19
  state
20
})

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

1
......
2
//引入store
3
import store from './store'
4
......
5

6
//创建vm
7
new Vue({
8
  el:'#app',
9
  render: h => h(App),
10
  store//传入store配置项
11
})

vuex中的配置项#

state（存放数据）#

state-状态，即数据， 类似于vue组件中的data 区别: 1.data 是组件自己的数据 2.state 是所有组件共享的数据

state对象，用于存放数据

1
const store =  new Vuex.Store({
2
  state:{
3
    count:0
4
  },
5
}

strict（严格模式）#

strict: true：开启严格模式

vuex不允许直接用* $store.state.num++*这类直接修改`state`中的数据的方法来修改`state`中的值，虽然代码执行不会报错，`state`中的数据也会改变，但是后期会影响维护，这是**不规范的操作**。 2.开启严格模式后，若执行*$ store.state.num++*这类直接修改state中的数据时，会提醒用户报错，不配置将不会提醒注意：上线时要关闭严格模式，不然会消耗性能

getters（存放加工state中的数据）#

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，类似于Vue中的计算属性，区别在于,因为只能获取，不能修改，修改需要用mutations

基本使用：必须要有返回值，返回值就是定义该属性的值，类似计算属性(computed)

1
//创建并暴露store
2
export default new Vuex.Store({
3
  ......
4
  getters：{
5
        bigSum(state){
6
            return state.sum * 10
7
        }
8
    }
9
})

组件中读取/访问数据：$store.getters.bigSum

mutations（存放方法）#

mutations 对象，对象中存放修改 state 的方法，方法中只能有两个参数，第一个是store里面的state，第二个是this.$store.commit('函数名'，参数)传的参数，只能传一个参数，需要传多个参数时，可以将参数改为对象或数组的形式传。

注意：mutations 必须是同步的(便于监测数据变化，记录调试)

1
const store =  new Vuex.Store({
2
  state:{
3
    count:0
4
  },
5
  // 定义mutations
6
  mutations:{
7
  //第一个参数是当前store的state属性，第二个数是提交调用commit传的参数
8
    函数名(state，参数) {
9
      state.count += 参数
10
    }
11
  }
12
})

2.组件中提交调用 mutations

1
this.$store.commit('函数名'，参数)

actions（存放处理异步的方法/函数）#

说明: mutations 必须是同步的(便于监测数据变化，记录调试)，处理异步必须使用actions，并且需要修改state中的数据时需要和mutations搭配使用，处理异步：通常是发请求

参数说明：第一个参数是context(上下文)，第二个参数是$store.dispatch('方法名'，参数)传入的参数

Context（上下文）#

上下文（Context）的概念：在计算机科学中，上下文通常指的是在某一特定时间点或操作点上的环境信息或状态。在Vuex的actions中，context 就是这样一种环境信息，它包含了与store相关的所有方法和属性，使得在actions中能够访问到这些资源和能力。
包含的方法和属性：
- commit：用于提交一个mutation，从而更改应用的状态。
- dispatch：用于分发一个action，可以包含异步操作。
- getters：用于访问store中的getter。
- state：直接访问store的state对象。
- rootState 和 rootGetters（在模块化的store中）：用于访问根节点的state和getters。

1
actions: {
2
    // 处理异步的方法
3
    asyncChangeNum (context, num) {
4
      // 多数时候是发送请求
5
      setTimeout(() => {
6
        context.commit('mutations里面的方法', num)
7
      }, 1000)
8
    }
9
  }

组件中提交调用：actions

1
$store.dispatch('处理异步的方法',参数)

基本使用#

初始化数据、配置actions、配置mutations，操作文件store.js

1
//引入Vue核心库
2
import Vue from 'vue'
3
//引入Vuex
4
import Vuex from 'vuex'
5
//引用Vuex
6
Vue.use(Vuex)
7

8
//创建并暴露store
9
export default new Vuex.Store({
10
    // 开启严格模式，vuex不允许直接用store.state.属性的方法来修改state中的值，
11
    // 开启严格模式后，会提醒用户报错，不配置将不会提醒
12
    // 注意：上线时要关闭严格模式，不然会消耗性能
13
  strict: true,
14
    // state状态，即数据，类似于vue组件中的data
15
    // 区别:
16
    // 1.data 是组件自己的数据
17
    // 2.state 是所有组件共享的数据
18
  state = {
19
    sum:0
20
  }，
21
  actions= {
22
      // 响应组件中加的动作
23
        jia(context,value){
24
            // console.log('actions中的jia被调用了',miniStore,value)
25
            context.commit('JIA',value)
26
        },
27
  },
28
   mutations = {
29
        // 执行加
30
        JIA(state,value){
31
            // console.log('mutations中的JIA被调用了',state,value)
32
            state.sum += value
33
        }
34
  },
35

36
})

组件中读取vuex中的数据：$store.state.sum
JS中读取vuex中的数据：store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

四个map方法的使用#

mapState方法：#

用于帮助我们映射state中的数据为计算属性

1
computed: {
2
    //借助mapState生成计算属性：Vuex中state的属性名、school、subject（对象写法，改名）
3
     ...mapState({组件使用的属性名:'Vuex中state的属性名',school:'school',subject:'subject'}),
4

5
    //借助mapState生成计算属性：Vuex中state的属性名、school、subject（数组写法）
6
    ...mapState(['Vuex中state的属性名','school','subject']),
7
},

mapGetters方法：#

用于帮助我们映射getters中的数据为计算属性

1
computed: {
2
    //借助mapGetters生成计算属性：bigSum（对象写法）
3
    ...mapGetters({bigSum:'bigSum'}),
4

5
    //借助mapGetters生成计算属性：bigSum（数组写法）
6
    ...mapGetters(['bigSum'])
7
},

mapMutations方法：#

用于帮助我们生成与mutations对话的方法，即：生成包含$store.commit(xxx)的函数

1
methods:{
2
    //靠mapActions生成：Vuex中mutations的方法名、decrement（对象写法）
3
    ...mapMutations({组件使用的方法名:'Vuex中mutations的方法名',decrement:'JIAN'}),
4

5
    //靠mapMutations生成：Vuex中mutations的方法名、JIAN（数组写法）
6
    ...mapMutations(['Vuex中state的方法名','JIAN']),
7
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

mapActions方法：#

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

1
methods:{
2
    //靠mapActions生成：incrementOdd、incrementWait（对象写法）
3
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
4

5
    //靠mapActions生成：incrementOdd、incrementWait（数组写法）
6
    ...mapActions(['jiaOdd','jiaWait'])
7
}

四个map的注意点#

mapState、mapGetters都应该放到组件的computed中，因为vuex的设计初衷是为了响应式共享数据，若放到组件的data中，vuex中的state数据将不会是响应式的。
mapMutations、mapActions都放在组件的methods中

模块化#

目的：让代码更好维护，让多种数据分类更加明确。维护时只需要根据所属模块来修改即可。

基本使用：#

模块拆分

创建模块：src/store/modules/user.js,根据需求创建模块

1
//例:  创建用户模块
2
const state = {
3
  userInfo: {
4
    name: 'kaka',
5
    age: 20
6
  }
7
}
8
const mutations = {}
9
const actions = {}
10
const getters = {}
11

12
const users = {
13
  state,
14
  mutations,
15
  actions,
16
  getters
17
}
18
// 导出模块
19
export default users

引入模块并配置

1
// 引入用户模块
2
import users from '@/store/modules/user'
3
// 引入设置模块
4
import settings from '@/store/modules/settings'
5

6
const store = new Vuex.Store({
7
    ......
8
    //配置模块
9
    modules: {
10
    users, settings
11
  }
12
}）

组件使用模块中的数据和方法#

注意：尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state 中，属性名就是模块名

组件获取子模块中 `state` 中的数据#

① 直接通过模块名访问 $store.state.模块名.xxx

② 通过 mapState 映射：

默认根级别的映射 mapState(['xxx'])

子模块的映射 mapstate('模块名',['xxx'])，需要开启命名空间(模块中配置 namespaced: true)

组件获取子模块中 `getters` 中的数据#

① 直接通过模块名访问 $store.getters['模块名/xxx'] ② 通过 mapGetters 映射:

默认根级别的映射 mapGetters(['xxx'])

子模块的映射 mapGetters('模块名'，「'xxx'])-需要开启命名空间

组件调用子模块中 `mutation`方法#

注意:默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

① 直接通过 store 调用 $store.commit('模块名/xxx'，额外参数)

② 通过 mapMutations 映射:

默认根级别的映射 mapMutations(['xxx'])

子模块的映射 mapMutations('模块名',['xxx'])-需要开启命名空间组件

组件调用子模块中 `action`方法#

注意 : ** 默认模块中的** mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

① 直接通过 store 调用 $store.dispatch('模块名/xxx'，额外参数) ② 通过 mapActions 映射

默认根级别的映射 mapActions(['xxx'])

子模块的映射 mapActions('模块名'，['xxx'])-需要开启命名空间

模块化+命名空间#

目的：让代码更好维护，让多种数据分类更加明确。

修改store.js

1
const countAbout = {
2
  namespaced:true,//开启命名空间
3
  state:{x:1},
4
  mutations: { ... },
5
  actions: { ... },
6
  getters: {
7
    bigSum(state){
8
       return state.sum * 10
9
    }
10
  }
11
}
12

13
const personAbout = {
14
  namespaced:true,//开启命名空间
15
  state:{ ... },
16
  mutations: { ... },
17
  actions: { ... }
18
}
19

20
const store = new Vuex.Store({
21
  modules: {
22
    countAbout,
23
    personAbout
24
  }
25
})

开启命名空间后，组件中读取state数据：

1
//方式一：自己直接读取
2
this.$store.state.personAbout.list
3
//方式二：借助mapState读取：
4
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

1
//方式一：自己直接读取
2
this.$store.getters['personAbout/firstPersonName']
3
//方式二：借助mapGetters读取：
4
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

1
//方式一：自己直接dispatch
2
this.$store.dispatch('personAbout/addPersonWang',person)
3
//方式二：借助mapActions：
4
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

1
//方式一：自己直接commit
2
this.$store.commit('personAbout/ADD_PERSON',person)
3
//方式二：借助mapMutations：
4
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

发现新文章