Vuex

ztc_张天赐
143 阅读2分钟

  1. 什么是vuex?

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

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

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

  3. vuex的理解

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

  4. 如何使用vuex?

    3.1 安装vuex cnpm install vuex -save

    3.2 在src目录下创建store文件夹

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

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

     import Vuex from "vuex"

    3.5 注册vuex Vue.use(vuex);

    3.6 对vuex进行实例化

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

    3.7 导出vuex

     export default store

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

    3.9 将store配置到vue实例中

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

  5. vuex的核心

    4.1 state的作用

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

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

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

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

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

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

    4.5 actions的作用

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

 4.5.2 在actions进行异步操作       

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

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

         promise

         async await

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

         for循环

         函数

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

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

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

    4.7 modules的作用是什么

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