• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Vue全家桶:Vuex

互联网 diligentman 2周前 (04-30) 8次浏览

🍳本文参考官网加上个人理解,如有不对欢迎指正!

文章目录

  • 1. 概述
  • 2. 响应数据流
  • 3. 基本使用
    • 3.1 安装与初体验
    • 3.2 vuex核心概念
      • state:单一状态树
      • getters:
      • moutation:状态更新
      • action:
      • module:模块

1. 概述

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

个人理解:Vuex就是一个公共仓库,里面存储了多个组件可以共享的响应式变量。


2. 响应数据流

在单页面数据流图解如下
Vue全家桶:Vuex
1.state:状态。可以当作用到的属性。
2.view:视图,用来显示state里属性的信息。
3.actions:在视图上绑定的事件,用来改变state里属性的值

循环路径: 就是 将state里的属性值放到view视图上显示,对视图进行点击或其他事件操作改变state属性值,然后又重新渲染到view上。就是这样一个循环。

缺点: 由于这是针对单个组件页面的,所以改变属性值很简单,但是如果多个组件页面用的是这同一个属性值,那么你这时发生改变了当然需要去通知其他也用到这个属性的页面,如果这样的依赖页面一多就会很复杂了,因为通过组件传值传来传去会显得很繁琐且不容易维护。

官方提供的vuex数据流图解
Vue全家桶:Vuex

1.Vue Components:Vue组件
以下三个为vuex的内容
2.State:属性状态
3.mutations:更改State属性的状态的唯一方法
4.Actions:执行异步处理的方法

5.Backend API:后端接口。与后端进行数据交互
6.Devtools:官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

循环路径: Vue 组件获取State里的属性并显示,然后在组件上进行事件操作,事件操作分发(dispatch)给Actions进行处理,Actions再提交(commit)给mutations进行更改State状态,状态更新再重新渲染显示。

感觉好像有点繁琐,其实如果事件操作不包含异步操作的话可以直接提交给mutations进行更改状态,但存在异步操作的话一定要进行actions操作,不然devtools工具无法跟踪操作后数据。

所以图可以看成以下亚子
Vue全家桶:Vuex


3. 基本使用

3.1 安装与初体验

安装
因为运行时时刻要用,所以安装运行版

npm install vuex --save

简单使用
和使用路由类似
1.导入vuex
2.vue使用vuex
3.创建vuex里store实例
4.export default暴露

import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store(
  state: {
  message:'hello'
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
  modules: {

  }
)
export default store;

5.入口文件main.js引用

import store from './store'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这样整个vuex基本框架就搭好了,让我们简单的使用下state里的message属性
在组件中引用

<div id='app'>{{ $store.state.message }}</div>

这样就引用成功了

3.2 vuex核心概念

vuex有几个核心的概念。
如上:state、mutations、actions、getters、module。一一进行简单介绍

state:单一状态树

就是将属性全部集中放在这里进行管理,方便进行维护和管理

getters:

这个没找到具体叫啥,它就类似于data里的computed计算属性,也就是说他本质也是属性,用来对数据进行某种转换过滤然后返回。

moutation:状态更新

这是对状态进行修改的唯一路径,不管是异步操作还是同步操作。
由图解也可知,它需要用到commit方法进行修改状态
它由事件类型+回调函数组成
如:

  increment(state, payload) {
    state.count++;
    console.log(payload);
  },

组件中进行提交的语法:

$store.commit(事件类型,参数)

一般提交负荷是个对象,这样写

 this.$store.commit({
    type: "increment",
    age: 20,
    say: "hello",
  });

type:事件类型
整个对象包括type、age、say就是提交负荷

响应规则:
在vue中进行数据响应的前提是需要将数据初始化,所以我们将需要响应的数据提前在store中初始化。
也可以通过vue内置方法Vue.set将新属性添加到响应块,如

Vue.set(obj, 'newProp', 123)

必须是同步:
原因就是每次进行moutation操作时,devtools它都需要捕捉这个过程前后状态,但是异步操作的回调函数存在返回时间的不确定性,devtools无法识别,因此等同于它无法跟踪这个异步操作,也就不能方便我们跟踪。

action:

不直接改变状态,而是提交给moutation

可以包含任何异步操作,我们一般用来与后端进行数据交互。

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }

可以通过解构进行简化

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

组件中分发给action:

store.dispatch('increment')

module:模块

如果数据量很大,为了缓解数据堆积的问题
在vuex中可以使用子模块,它们里面同样包含了以上核心概念

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
  }
})


程序员灯塔
转载请注明原文链接:Vue全家桶:Vuex
喜欢 (0)