VUEX简介

什么是vuex：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状 态

文章目录

• vuex使用场景？
• 下载，与引入使用vuex
• 总结

一、VUEX使用场景？

        随着我们开始逐渐使用vue,我们都清楚vue其中之一的优点是组件化，提到组件化不得不说一个 ‘报童’ (组件之间的传参)，这样的话问题就来了，熟知的传参方式有很多(props,自定义事件，全局事件总线，pubsub...)，我们该怎么判断具体是使用哪一种传参方式嘞？悄咪咪告诉你们(根据数据量来判断具体使用哪一种传参方式，那么vuex就解决了复杂组件之间的通信问题)

二、使用步骤

1.下载vuex插件

代码如下（示例）：

npm install vuex

2.配置文件

创建js文件，引入相应的模块，再把它暴露出去，

代码如下（示例）：

import Vue  from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//暴露模块
export default new Vuex.Store({

state:{

},
getters:{

}
actions:{

},
mutations:{

}
})

main.js配置

                                                                  箭头略丑，看官见谅

3.配置项简介

3.1  store

vuex中最关键的就是store了，也是vuex的核心，vuex中只有一个store对象

五个状态（都为对象）

3.1.1 state

        state是唯一存放数据的地方 

state：{
    list:[],
    arr:'',
    .....

}

借用store中数据的方法：

this.$store.state,list

3.1.2 actions

actions：唯一执行异步请求数据的地方

调用方法

this.$store.dispatch(方法名，传的数据）

3.1.3 mutations

唯一修改state数据的地方

调用方法

this。$store.commit(方法名，参数)

3.1.4 getters

getters，对store中的数据进行加工处理形成新的数据（类似于计算属性）

3.1.5 modules

modules,最会为store分忧，分为多个子仓库，在modules进行集合，在处理后进行合并 也就是将store模块化，视情况分模块处理

---

总结

以上为vuex简介，欢迎各位大人小主莅临指导，