vuex学习知识点

357 阅读2分钟

什么是vuex?

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

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

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

vuex的深入理解?

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

如何使用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"  //引入vue实例
import Vuex from "vuex"  //引入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)
})

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进行异步操作 **

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

如何将一个程序编程异步操作?
        1.定时器
        2.promise
        3.async await
什么是同步操作? 
    当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行
        1.for循环
        2.函数
        3.通过promise对象可以进行异步操作

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

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

4.7 modules的作用是什么

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