vuex的使用

1、什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

通俗的来讲vuex也就是我们的一个数据管理工具，如果我们在实际开发中，组件会变得非常的多，组件之间的传值也会相应变得麻烦起来，此时我们就可以用vuex来写，因为vuex中的数据是在全局中都是共享的

2、vuex能够帮助我们解决什么问题?

vuex能够帮助我们解决组件之间数据传递或者共享的问题

3、我对vuex的理解

Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。
如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属
性，
这就需要一个将共享的状态数据属性进行集中式的管理。
这就是 Vuex 状态管理所要解决的问题。

4、如何使用vuex?

1 安装vuex
        cnpm install vuex -save
    
2 在src目录下创建store文件夹

3 在store文件夹内创建index.js文件

4 在index.js 文件内引入 vue 和vuex
    import Vue from "vue"

    import Vuex from "vuex"

5 注册vuex
    Vue.use(vuex);

6 对vuex进行实例化

    const store = new Vuex({
        核心配置
    })    

7 导出vuex

    export default store

3.8 在main.js文件中引入store文件夹内的index.js文件
    import store from "./store" 

9 将store配置到vue实例中

    new Vue({
        router,
        store,
        render: h => h(App)
    })

5、vuex的核心

1 state的作用
  state : 保存初始化的一些状态(数据)

2 在组件中如何获取state的状态

    全局:
        $store.state.定义的属性
    局部:        
        this.$store.state.定义的属性

3 mutations的作用
    定义改变state状态的方法

4 在组件中如何调用mutations内定义的方法

    全局:
        $store.commit("方法名")
    局部:    
        this.$store.commit("方法名")    

5 actions的作用

    5.1 通过actions里面定义的方法去触发在mutations里面定义的方法,并间接的改变state的状态

    5.2 在actions进行异步操作       

        什么是异步操作?
            当一个程序没有执行完成,并不影响下面程序的执行,这个时候我们把它称之为异步操作

        如何将一个程序编程异步操作?
            定时器

            promise

            async await

        什么是同步操作?
            
            当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行

            for循环

            函数

        通过promise对象可以进行异步操作

6 在组件中如何调用actions里面定义的方法

    全局:
        $store.dispatch("方法名",载荷) // 这里的载荷其实指的是要传递的参数
    局部:     
        this.$store.dispatch("方法名",载荷)


7 modules的作用是什么

    由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
    当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
    为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
    每个模块拥有自己的 state、mutation、action、getter 等