vuex的使用

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex是什么？为什么要用它？？

它采用集中式存储管理,可以方便的进行数据的集中管理
每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

二、使用

二vuex的核心概念：store、state、getters、mutations、actions

  const store = new Vuex.Store({
   state,    // 共同维护的一个状态，state里面可以是很多个全局状态
   getters,  // 获取数据并渲染
   actions,  // 数据的异步操作
   mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
  })

三、访问方式

怎么访问数据嘞

访问state数据:$store.state.属性名
访问getters数据：$store.getter.计算属性名
调用mutations方法: $store.commit('方法名',实际参数)
调用actions方法:$store.dispatch('方法名')

三.模块访问 把vuex又分成小的模块

引入模块 import 模块名 from 路径

	modules:{
		模块
		模块名
			}

在computed去计算

computed:{
映射带模块cart
..mapState({goods:state=>state.cart.goods
不带模块   
...mapState([''userinfo''])
})
}

在组件中使用

<p>{{goods}}</p>
<p>{{userinfo}}</p>
其余如此（mapGetter ,mapActions,mapMutations）

vuex中的state与getter映射为组件的data数据
vuex中的actions和mutations映射为组件methods方法

调用模块

调用模块属性: $store.state.模块名.属性名
调用mutations方法:$store.commit('模块名/方法名',参数)
调用actions方法:$store.dispatch('模块名/方法名')

state模块

其中的state模块是用来定义和存放数据的，如果使用次数不多，可以使用$store.state.数据名去读取state中存放的数据；其中的store是Vuex模块的管理者，无论调用dispatch还是commit都需要store。多次使用建议用mapState引入，然后在computed中用…展开使用，mapState本身是一个函数，调用传递一个数组，要用哪像直接将名字写到数组里就行，他的返回值是一个对象，对象里存的就是想要用到的数据的计算属性使用：直接写this.数据名字就行；

actions模块

 actions模块用于响应组件中的动作一般代码的逻辑写在actions中，比如我需要点击一个按钮500毫秒以后提交给下一个模块操作，此时可以给commit操作写在一个定时器里面，500毫秒以后再调用commit方法；

mutations模块

 此模块用于修改state模块中的数据，actions模块调用commit方法就能直接将数据传到mutations模块中，mutations模块可以根据收到的数据，直接修改state模块中储存的数据；

getters模块

此模块用于对state的中存储的数据进行加工处理，有点类似于computed计算属性；

store模块

store如上原理图所示，是用于管理其它模块的，在调用dispatch和commit方法时，都需要使用$store;