vuex基本了解

Vuex初识

概念

实现集中式状态管理的插件，是vue团队打造的一种组件间通信的方式### 概念

实现集中式状态管理的插件，是vue团队打造的一种组件间通信的方式

何时使用

当组件之间需要处理相同的状态数据(共享)

工作原理

首先，VueComponents(组件)

调用dispatch('Actions里面的一个同名函数','数据')发出一个操作state里面状态的请求

然后actions找到dispatch传的这个同名函数**(响应)**，调用这个函数，这个函数里面会

调用commit('Mutations里的一个同名函数','数据')进入mutations中找到这个同名函数,

调用这个函数(处理)，实现对state状态数据的操作，然后重新解析并render组件

现在可以浅看一下工作原理图，后面有具体实现细节(doge)

搭建vuex环境

在终端输入npm i vuex@3安装vuex插件

vue2支持vuex3，vue3支持vuex4

在脚手架的src文件夹中，新创建一个store文件夹，在此文件夹中创建index.js(推荐)

在index.js中我们导入vue，vuex，并应用vuex插件

接着准备actions，mutations，state配置项

创建并暴露store，将上面三个配置项传到store

然后在src的main.js中导入store，在vm中配置store

至此，脚手架项目就可以使用vuex插件了

利用vuex实现一个比较基础的数据共享(看图应该就可以理解)

注意点：

1.这个数据3一般从服务器后台获取，一般dispatch这不传参

2.actions里面进行网络请求和业务逻辑设计等(就是工作原理中的Bankend API)，不实现具体的数据操作

3.context就是一个mini版store，里面有你要的commit,state等

4.value就是那个数据

5.mutations里的函数里的state就是store的state

如上这些都是vuex已经集成好的

建议点:

1.若数据不需要服务器，并且也不需要什么其他逻辑或者ajax请求

则你可以直接调用commit到mutations里面完成数据的操作，跳过actions

2.actions,mutations里面这个函数名字最好只是大小写之分，后者一般大写(vue官方推荐)

getter配置项

当state里的数据只需要被读取进行加工而不修改时

给store配置一个getters，里面写一个函数，返回你要加工后的值

四个map

为了优化代码不必要出现重复，推出四个操作map操作去操作store里的配置项

mapState和mapGetters

第一步，从vuex中导入mapState对象

第二步，在computed里使用...mapState({属性名:'state里的数据',属性名:'state里的数据'})

第三步，插值语法修改

emmmm请自动忽略age，无伤大雅

mapActions和mapMutations

和前俩个map差不多

mapActions可以生成与Actions对应的方法，即包含$store.dispetch()的函数

mapMutations可以生成与mutations对应的方法，既包含$store.commit()的函数

注意点：若需传参，则在模板中绑定事件就传好参数，否则是事件对象event(比如上面的这个increment(1))