vuex傻瓜式理解

vuex
我翻看了好多vuex的博主，总觉得理解不深，趁着周末就自己在家好好结合网上的视频和官方文章就自己稍微整理了一下。
一、首先我们来理解一下vuex他是个什么东西，
首先它是一个仓库里面存着各种信息，比如存放着一个人的信息，也可以通过仓库里的工具，（打比方仓库里的工具臂）操作工具臂去改变仓库存放的东西，把它移除或者增加
二、vuex有哪些核心概念
我来列举一下，了解过vue基本概念都都应该一眼能看懂我都每个概念后的备注
1、State =>(可以当作vue里的data)
2、Getters =>(可以当作vue里的computed）
3、Mutations =>(可以当作vue里的methods **mutations里不可使用任何的异步方法，异步统一在actions里调用）
4、Actions
5、Modules
三、各个概念的具体使用介绍
State使用
State可直接在代码片段中通过$store.state.属性名来进行使用，也可以在computed里进行通过return来使用

Getter使用
Getter类似于computed，通过return一个state.属性名以后也可直接在代码里调用store.$getter.
vuex
我翻看了好多vuex的博主，总觉得理解不深，趁着周末就自己在家好好结合网上的视频和官方文章就自己稍微整理了一下。
一、首先我们来理解一下vuex他是个什么东西，
首先它是一个仓库里面存着各种信息，比如存放着一个人的信息，也可以通过仓库里的工具，（打比方仓库里的工具臂）操作工具臂去改变仓库存放的东西，把它移除或者增加
二、vuex有哪些核心概念
我来列举一下，了解过vue基本概念都都应该一眼能看懂我都每个概念后的备注
1、State =>(可以当作vue里的data)
2、Getters =>(可以当作vue里的computed）
3、Mutations =>(可以当作vue里的methods **mutations里不可使用任何的异步方法，异步统一在actions里调用）
4、Actions =>(可以当作vue里的data）
5、Modules
三、各个概念的具体使用介绍
State使用
State可直接在代码片段中通过$store.state.属性名来进行使用，也可以在computed里进行通过return来使用

Getter使用
Getter类似于computed，通过return一个state.属性名以后也可直接在代码里调用store.$getters.getNum

Mutation使用
大致了解了state以后当我们修改其中某个值的时候，就需要用到mutation这个功能
ps:(我一开始使用的时候都是直接$store.state.xxx=xxx,虽然同样能完成赋值，但是我是强烈不推荐这么使用，因为无法追踪到它是在哪里被改变)
所以这个时候就需要我们通过mutation来调用，它类似于methods，下面是代码


我们来了解一下这个使用，首先我们在mutations里面注册了一个叫做increase的函数，接收两个形参，state想必都知道，其中payload，官方解释叫做载荷，其实说大白话就是参数，在我们需要的地方只需通过$store.commint(‘increase’,实参)来进行一个参数的传递和接受，切记这个无法用异步，异步的方法是通过其他来操作的。看下文
Action使用
接下来就是action的使用，其实这里虽然是异步，但是做事情的但是commit，只不过把异步的任务写在了这里面

上图就是往decreaseAsync(context){
context.commit(‘方法名’)
}这个函数里面传递了一个形参叫做context，然后再通过context.commit来进行一个方法的调用。这个是在vuex里面进行操作，在外面页面我们想通过这个链式操作则需要$store.dispatch.方法名，当然这里和commit一样支持通过载荷或者对象的方式进行一个参数的传递哦～其实我第一次接触发现好多一举，哈哈哈哈，后来发现只有异步方法才可以使用这个，就觉得它顺眼多了。
Module使用
这里我是准备先带大家了解完辅助函数再来进行这个理解
四、辅助函数
map*函数，先上两段代码


接下来我们来理解一下关于map的使用。
分别有mapState,mapGetters,mapMutitions,mapActions,其实我们把map先忽略正是对应了我们的4中状态，前两个为值，后两个为操作方法，所以也可以理解为什么一个只能放在computed和methods里面了把。
随后通过import的方式把四种从vuex里引入，通过…mapXXXXX的方式这个时候它变成了一个方法，中间传递一个数组，对应了vuex的值或方法名。接下来我们就不需要在页面中通过$store的方式来使用了，可以直接使用变量名的方式在页面中展示。
——————————————————————————
我们在回归到Module,设想如果我们的项目够庞大会造成数据臃肿的一个状态，所以vuex是支持我们进行一个模块化的拆分的，就是说每个状态都可以为一个单独的js文件。如下图

通过上图我们可以清楚的看到每个状态都被我们分离了出去，而在每个对应的文件离我们只需要道出即可使用，如下图

这个时候我们还没用到Module，接下来我们就需要他了

通过创建名字为user的一个文件下，同样包含主模块里的内容，随后我们开启namespaced：true功能，这个开启以后我们可以在外部直接通过.的方式来访问到内部的值如下图在最右边我们可以明显看到值直接通过.的方式来访问，当然如果访问子模块我们仍需要通过指明路径的方式来访问对应的内容哦，比如最右边中的changeNickName哦～

最后我们来了解一个type

用这种主要是方便我们通过对象.的方式来进行一个方法调用。了解即可，需要的可自行百度哦～
大致总结内容就是如上。不到处多多谅解～感谢