【Vuex基础详细理解】

---

Vuex是什么？

Vuex是专门为Vue.js开发的集中式状态（数据）管理模式，所谓的集中式就是把数据都集中到一个地方进行管理，各部分通过某种办法访问到这些集中的数据，Vuex是Vue中一个独立的部分，简单理解就是不交错于任何组件，这种方式也方便了组件对一个数据源的集中访问。

Vuex适用于任意组件间的相互通信

---

什么时候使用Vuex？

1. 多个组件依赖于一个状态.
2. 来自于不同组件的行为都需要改变同一状态

Vuex的安装

因为Vuex的安装和配置依赖于Vue脚手架，所以在安装的时候我采用的是node.js下的npm工具
指令如下：

npm i vuex
1

需要注意的是：
如果选择直接安装的话，安装的将会是Vuex的最新版本，而因为Vue2和Vue3对Vuex的兼容性问题，所以Vuex3以上的版本只能在Vue3中运行，如果你用的是Vue2的话，即安装Vuex3

配置Vuex

在Vuex中，整个Vuex流程都受到store的管理，因此：
第一步：在src文件夹下创建store/index.js文件，用来配置Vuex：

//该文件用于创建Vuex中最核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex);

//此时我们需要配置actions、mutations以及state
//actions----用于响应组件中的动作（行为）
const actions = {}

//mutations----用于操作数据
const mutations ={}

//state----用于存储数据
const state = {}

//创建并暴露store
    export default new Vuex.Store({
        actions,
        mutations,
        state
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

第二步：在main.js中创建vm时传入store配置项:

//引入store
impotr store from './store'
//创建vm
new Vue{
    el:'#app',
    render:h =>h(App),
    store,
}
1
2
3
4
5
6
7
8

此时，我们已经完成了Vuex的配置，接下来将会对Vuex的工作流程进行一个详细的理解

---

Vuex的工作原理

Vuex由Actions（行为）、Mutations（修改、加工）、state（状态、数据）三部分组成（对象）

Actions

Actions是Vuex接收各组件行为的部分，在组件中通过调取Dispath这个AIP从而把组件的行为传递到store中，准确来说是传递到Actions这个环节，Dispath(name, value)会传递两个参数，其中name是进行操作的函数名，value传递的就是参与操作的参数。

在action中，一个名为name的函数在此之前被创建，于是，名为name(context, value)的函数会接收到两个参数,context参数简单理解来说就是一个store对象，value接收的就是参与操作的参数。

当流程走到Actions中后，我们需要在名为name()的函数中调用Commit('NAME', value)把值传递给Mutations

Mutations

Mutations就是实际操作数据的环节，在Actions传递行为之后，我们需要在其中创建一个名为NAME(state, value)的函数，state就是我们要进行操作的数据源，value就是参与操作的参数，在这个环节中，我们就可以实现对sate中的数据进行操作

State

State存储组件共享的数据源，并在Mutations操作数据后，能在组件中更新修改后的数据，组件中通过插值语法访问到数据，形成数据的交互与多组件间数据的共享

---

到此，一个完整的的组件共享数据以及Vuex工作流程结束

需要注意的几点是：
当我们不涉及业务逻辑和网络请求的时候，是可以选择跳过actions，直接参与mutations的，Vue也允许我们这样做，但是，这种方式仅限于简单操作以及无网络请求的情况下。

其次，我们的业务逻辑和请求都必须写在actions对应的方法中，不能在mutations中参与业务逻辑和请求，虽然在actions处理数据后页面也能呈现出相应的效果，但由于Vue提供的开发者工具只监测mutations，所以在action中操作数据会导致我们在调试数据的时候无法得到数据的错误和问题

完整代码示例

main.js:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false


//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

src/store/index.js:

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex);

//Actions
const actions = {
  方法名(context,value){
      //调用commit方法
      context.commit('方法名',value);
  },
  .......
}
 
//Mutations 
const mutations = {
  方法名(state,value){
      //操作部分
      ......
  },
    ......
}
    
//state
const state = {
    //数据源
};

export default new VUex.Store({
    actions,
    mutations,
    state
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

组件.Vue

<template>
  <div>
    <!--获取到store.state中的数据源-->
    <h1>xxxxxx:{{$store.state.Data}}</h1>
    <!--操作可以写成methods等等都行，以下我拿点击事件举例-->
    <button @click="FuncitionName">XXXXX</button>
  </div>
</template>

<script>
export default{
    name:'components',
    data(){
    .....
    },
    methods:{
      FuncitionName(){
        //此时，就要调用$store.dispatch()
        this.$store.dispatch('name', value)
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

App.vue我就不写了，也只是需要把组件引入到App.vue中

---

总结

以上就是我对Vuex的理解，我认为其实开始比较难理解的部分就在于组件中的行为从Actions传递到Mutations这部分，其实当自己上手练习过后，简单理解起来，组件中到Actions再从Actions到Mutations这个流程无非就是一直再传递参数以及行为而已，虽然组件可以直接和Mutations对话，但这仅限于简单的增删改数据而已，当程序中需要有大量业务逻辑时，以及网络请求时，依旧需要用到整个流程，所以，建议不管是简单操作或是直接处理，都按照规范流程进行。

终于写完了，别忘了点赞收藏再走哟！！！