点击上方 蓝字关注我们
![fb2f59078d2876c54798b200d5961cd5.png](https://i-blog.csdnimg.cn/blog_migrate/fc445f8f5b7c9e8f7b4220203dce9a51.png)
大家好,小z又与大家见面了,大家元旦过的怎么样呀,哈哈,今天给大家带来vuex的使用教程。本篇文章是对vuex的简单介绍,具体的应用打算放到下一篇文章前端生成动态菜单一起介绍给大家。
![4ce949c88a35ea903087e739b426a2b6.png](https://i-blog.csdnimg.cn/blog_migrate/6fc7c699dc3074e28b39053fe32d6251.png)
![912c7fa769f777a216a03e1ab8bd6d94.png](https://i-blog.csdnimg.cn/blog_migrate/f01219c8c12bc8e34d9a8f482d7a248c.png)
vuex是一个专门为Vue.js应用设计的状态管库构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。
![4ce949c88a35ea903087e739b426a2b6.png](https://i-blog.csdnimg.cn/blog_migrate/6fc7c699dc3074e28b39053fe32d6251.png)
![912c7fa769f777a216a03e1ab8bd6d94.png](https://i-blog.csdnimg.cn/blog_migrate/f01219c8c12bc8e34d9a8f482d7a248c.png)
在vue项目中,涉及到组件之间的数据传递,我们可以通过vue组件间的传值来实现,但是如果组件特别多,尤其是组件嵌套的很复杂,那岂不是很麻烦。这个时候我们使用了vuex,我们把要处理的数据放到vuex中,在各个组件中调用vuex提供的方法就可以拿到值了,这不是更加方便吗?
![4ce949c88a35ea903087e739b426a2b6.png](https://i-blog.csdnimg.cn/blog_migrate/6fc7c699dc3074e28b39053fe32d6251.png)
![912c7fa769f777a216a03e1ab8bd6d94.png](https://i-blog.csdnimg.cn/blog_migrate/f01219c8c12bc8e34d9a8f482d7a248c.png)
1. state:vuex的基本数据,用来存储变量。
2.getter:从基本数据(state)派生的数据,相当于state的计算属性。
3.mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回 调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4.action:和mutation的功能大致相同,不同之处在于
(1)Action 提交的是 mutation,而不是直接变更状态。
(2)Action 可以包含任意异步操作。
5.modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
![4ce949c88a35ea903087e739b426a2b6.png](https://i-blog.csdnimg.cn/blog_migrate/6fc7c699dc3074e28b39053fe32d6251.png)
![912c7fa769f777a216a03e1ab8bd6d94.png](https://i-blog.csdnimg.cn/blog_migrate/f01219c8c12bc8e34d9a8f482d7a248c.png)
1.我们需要下载vuex
npm install vuex
2.引入并使用Vuex
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
3.创建vuex对象
const store = new Vuex.Store({ state: { // 存放状态 }, getters: { // state的计算属性 }, mutations: { // 更改state中状态的逻辑,同步操作 }, actions: { // 提交mutation,异步操作 }, // 如果将store分成一个个的模块的话,则需要用到modules。 //然后在每一个module中写state, getters, mutations, actions等。 modules: { a: moduleA, b: moduleB, // ... }});
![4ce949c88a35ea903087e739b426a2b6.png](https://i-blog.csdnimg.cn/blog_migrate/6fc7c699dc3074e28b39053fe32d6251.png)
![912c7fa769f777a216a03e1ab8bd6d94.png](https://i-blog.csdnimg.cn/blog_migrate/f01219c8c12bc8e34d9a8f482d7a248c.png)
简单小结下,vuex的核心就是:state,getters,mutations,actions,modules这五个模块,实际用起来并不是特别难,state存放数据,getters获取数据,mutations,actions处理请求,modules分模块,这样归类下是不就简单理解多了,额,,vuex的具体使用小z在开篇就已经说了,结合下篇文章就会把vuex用到项目里了。大家尽情期待吧!!!
让我知道你在看
![be49c426fa663cacadc098cca1d45047.gif](https://i-blog.csdnimg.cn/blog_migrate/37b1853ee7ff58d0e8f0dd4b65e274b5.gif)