Vuex的响应式原理

状态管理

在开发中，我们会用应用程序处理很多的数据，这些数据需要保存在我们应用程序徐的某一个位置，对于这些数据的管理我们就称之为状态管理

使用方法

下载vuex最新版 npm install vuex@next
新建文件夹及文件

* index.js导入createStore ，并创建state共享数据
import { createStore } from 'vuex'
const store = createStore({state() {return {counter: 100}}
})
export default store;

在main.js文件中添加依赖并使用
import store from './store'
createApp(App).use(store).mount('#app')
在组件中使用
<h2>{{$store.state.counter}}</h2>
组件方法中获取数据(不建议修改)
this.$store.state.counter
组件方法通过commit修改数据（建议）

单一状态树

定义：用一个对象就包含全部的应用层级的状态
单一状态树的优势：能够使用最直接的方式找到每个状态片段，方便维护、调试和管理

mapState方法

导入
option api
setup()做法

封装成一个函数

es6之扩展运算符三个点（…）
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

相当于

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

getter的基本使用

类似于computed

option api

当多个计算属性时，我们可以使用mapGetters (需要要导入)image.png

mutations

提交数据

mapMutations

提交到根里面

actions的基本使用（派发）

可以进行异步操作

派发到根actions里面
派发风格------对象类型

辅助函数 mapActions
setup函数中使用

结合axios和promise做异步请求

modules(模块)

使每个模块都拥有自己的state、mutation、action、getter,甚至嵌套子模块
基本使用
导出

导入

拿一个模块里面的getters里面的数据
其他模块的getters里面的数据在根getters会做一个合并，
actions和mutations里面的数据同样会做合并

但是这种方法很难让人知道数据到低是从那个文件传过来的
so：我们在定义模块的时候，在其对象里面设置属性

使用

在组件里使用模块辅助函数

1.写法一

2.写法二：
import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from "vuex"; const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers("home")

computed（）{...mapState(["homeCounter"]),...mapGetters(["doubleHomeCounter"])
}

关于映射返回函数的处理方式（就算有子模块也适用）

使用方法（"模块名字"，["方法名"]）
const getters = useGetters("home", ["doubleHomeCounter"])
出口函数index.js

import { useGetters } from './useGetters';
import { useState } from './useState';export {useGetters,useState
}

useState.js

import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'export function useState(moduleName, mapper) {let mapperFn = mapStateif (typeof moduleName === 'string' && moduleName.length > 0) {mapperFn = createNamespacedHelpers(moduleName).mapState} else {mapper = moduleName}return useMapper(mapper, mapperFn)
}

useGetters.js

import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'export function useGetters(moduleName, mapper) {let mapperFn = mapGettersif (typeof moduleName === 'string' && moduleName.length > 0) {mapperFn = createNamespacedHelpers(moduleName).mapGetters} else {mapper = moduleName}return useMapper(mapper, mapperFn)
}

useMapper.js

import { computed } from 'vue'
import { useStore } from 'vuex'export function useMapper(mapper, mapFn) {// 拿到store独享const store = useStore()// 获取到对应的对象的functions: {name: function, age: function}const storeStateFns = mapFn(mapper)// 对数据进行转换const storeState = {}Object.keys(storeStateFns).forEach(fnKey => {const fn = storeStateFns[fnKey].bind({$store: store})storeState[fnKey] = computed(fn)})return storeState
}

Vuex的响应式原理相关推荐

深入浅出Vue响应式原理
前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这 ...
你不知道的Vue响应式原理
文章首发于github Blog. 本文根据Vue源码v2.x进行分析.这里只梳理最源码中最主要的部分,略过非核心的一些部分.响应式更新主要涉及到Watcher,Dep,Observer这几个主要类. ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
Vue.js 深入响应式原理
深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
vue - 响应式原理梳理(一)
描述我们通过一个简单的 Vue应用来演示 Vue的响应式属性: html:<div id="app">{{message}}</div>js:let ...
Vue 响应式原理(双向数据绑定) 怎样实现响应式原理？
Vue 响应式原理(双向数据绑定) 怎样实现响应式原理? 我们在Vue里面,定义在Data里的属性,叫做响应式属性. 每一个vue组件被创建的时候,同时还有一个对象被创建出来了,这个对象我们是看不到 ...
Vue.js响应式原理
Vue.js响应式原理框架浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
vue2的响应式原理学“废”了吗？继续观摩vue3响应式原理Proxy
一文了解Vue3的响应式原理一.

Vuex的响应式原理

状态管理

使用方法

单一状态树

mapState方法

es6之扩展运算符三个点（…）

getter的基本使用

mutations

actions的基本使用（派发）

modules(模块)

Vuex的响应式原理相关推荐

最新文章

热门文章

Vuex的响应式原理

状态管理

使用方法

单一状态树

mapState方法

es6之扩展运算符 三个点（…）

getter的基本使用

mutations

actions的基本使用（派发）

modules(模块)

Vuex的响应式原理相关推荐

最新文章

热门文章

es6之扩展运算符三个点（…）