vuex的核心概念（一）上

vuex的核心概念

Getters 加工state成员给外界，算是vuex的一个计算属性这个可以放到computed里面映射为计算属性。Actions 异步操作，在这个里面进行异步操作但是他不能直接对state成员进行修改需要通过commit 映射mutating里的成员方法进行修改。Mutations 对state成员操作，通过该对象里的成员方法对state里的成员变量进行修改Modules 模块化状态管理，对于一个状态管理器需要存放的东西太多造成代码量大且臃肿难以维护所以有了模块化管理的东西相当于分包加载或者说是吧vuex拆分成了一个个的组件

vuex的工作图解

这个是网上找的一张图有不对的请在加评论指正 首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，1.3.3节中有提到，不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = ‘hello’)的话不能被VueDevtools所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。

2.1 Mutations 改变store里state的属性值时只能通过mutation里的方法进行改变且mutation的方法里不能进行异步操作只能通过actions里的方法进行异步操作来间接的对mutation里的方法改变state里的值

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.store({ state:{ name:'helloVueX' }, mutations:{ //es6语法，等同edit:funcion(){...} edit(state){ state.name = 'jack' } } }) export default store

在actions中可以通过commit方法进行映射mutation的方法来修改store中state的成员变量

this.$store.commit('edit')

2.2.2 Mutation传值

this.$store.commit('edit',15)

传对象

this.$store.commit('edit',{age:15,sex:'男'})

另外一种提交方式

this.$store.commit({ type:'edit', payload:{ age:15, sex:'男' } })

在 . vue文件中可以通过 …Mapmutations([“方法名”]) 的形式进行映射然后进行调用

...Mapmutations(['LoginIn']),

映射完成后

this.LoginIn//就会调用这个

增删state中的成员 为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。 例如对state对象中添加一个age成员

Vue.set(state,"age",15)

Vue.delete 删除成员

Vue.delete(state,'age')

2.4 Actions 由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

context 上下文(相当于箭头函数中的this)对象payload 挂载参数

例如，我们在两秒中后执行2.2.2节中的edit方法

由于setTimeout是异步操作，所以需要使用actions

actions:{ aEdit(context,payload){ setTimeout(()=>{ context.commit('edit',payload) },2000) } }

在组件中调用:

this.$store.dispatch('aEdit',{age:15})

方法2

...mapActions('user', ['LoginIn']), this.loginIn("参数"), //或者 <button @click='loginIn(参数)'></button>

今天小编先到这里下班了小编急着回家了下期吧剩下的补充进去，请大家伙期待更新哦下期会把vue的混入挤进去的哦