vuex存储数据a组件获取的到数据b组件获取不到_zbootadmin系列（十三）之vuex的使用...

点击上方 蓝字关注我们

                                

  大家好，小z又与大家见面了，大家元旦过的怎么样呀，哈哈，今天给大家带来vuex的使用教程。本篇文章是对vuex的简单介绍，具体的应用打算放到下一篇文章前端生成动态菜单一起介绍给大家。

什么是vuex

        vuex是一个专门为Vue.js应用设计的状态管库构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

为什么使用vuex

       在vue项目中，涉及到组件之间的数据传递，我们可以通过vue组件间的传值来实现，但是如果组件特别多，尤其是组件嵌套的很复杂，那岂不是很麻烦。这个时候我们使用了vuex，我们把要处理的数据放到vuex中，在各个组件中调用vuex提供的方法就可以拿到值了，这不是更加方便吗？

vuex的属性

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,使得结构非常清晰，方便管理。

vuex的简单使用

    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,    // ...  }});

小结

        简单小结下，vuex的核心就是：state，getters，mutations，actions，modules这五个模块，实际用起来并不是特别难，state存放数据，getters获取数据，mutations,actions处理请求，modules分模块，这样归类下是不就简单理解多了，额，，vuex的具体使用小z在开篇就已经说了，结合下篇文章就会把vuex用到项目里了。大家尽情期待吧!!!

让我知道你在看