关于vue3 vuex4 store的响应式取值问题解决

场景：

在页面中点击按钮，数量增加，值是存在store中的，点击事件，值没变。

<script setup lang="ts">
import { useStore } from '@/vuex';
const store = useStore()
const onSubmit = () => {
  store.dispatch("incrementAction", 1);
}
let count = store.state.count
</script>
<template>
  <h1 @click="onSubmit">{{ count }}</h1>
</template>

原因：store.state.count错误的取值方式，虽然可以取出，但是丧失了响应式,也就是触发increment事件时候，count的值不会变化

解决：

<script setup lang="ts">
import { useStore } from '@/vuex';
import {computed} from 'vue'
const store = useStore()
const onSubmit = () => {
  store.dispatch("incrementAction", 1);
}
let num = computed(() => store.state.count)
</script>

<template>
  <h1 @click="onSubmit">{{ count }}</h1>
  <h1>{{$store.state.count}}</h1>
</template>

或者，标签中用$store.state.count也能取得响应式的值。

到此这篇关于vue3 vuex4 store的响应式取值的文章就介绍到这了,更多相关vue3 vuex4取值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TypeScript在Vuex4中使用TS实战分享

    TypeScript在Vuex4中使用TS实战分享

    目录 简介 createStore GetterTree MutationTree ActionTree ModuleTree 实战 整体目录结构 首先定义根state的类型 在创建store的时候将根state的类型传递进去. 并且需要导出key 在Vue实例使用store的时候将key一并传入. 在vue组件使用 自定义useStore()方法 modules的使用 总结 简介 虽然TypeScript知识点学了很多,但是在实际项目中很多小伙伴还并不知道怎么用,今天笔者结合Vuex4来使用T

  • vuex存值与取值的实例

    组件内取值 computed: { value() { return this.$store.state.userData.xxx; } }, 组件内存值 methods: { fn() { this.$store.commit('setValue',xxx) } } store的matution.js中 setValue(state,xxx){ state.userData.xxx= xxx; }, store的index.js中 const state = { userData: { "xx

  • Vue3中使用vuex4的实现示例

    Vue3中使用vuex4的实现示例

    目录 1.引入依赖: 2.新建文件夹 store ,在里面新建文件 index.js 3.index.js文件内容: 4.在 main.js 中引入 5.使用 6.修改 count 的值 1.引入依赖: npm i vuex 2.新建文件夹 store ,在里面新建文件 index.js 3.index.js文件内容: import { createStore } from 'vuex' export default createStore({ state: { }, mutations: {

  • vue遍历对象中的数组取值示例

    前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

  • 关于vue3 vuex4 store的响应式取值问题解决

    场景: 在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变. <script setup lang="ts"> import { useStore } from '@/vuex'; const store = useStore() const onSubmit = () => { store.dispatch("incrementAction", 1); } let count = store.state.count </s

  • vue3结构赋值失去响应式引发的问题思考

    vue3结构赋值失去响应式引发的问题思考

    目录 前言 原始值的响应式系统的实现 为什么ES6 解构,不能随意使用会破坏他的响应式特性 proxy背景 实现原理 解构 props 对象,因为它会失去响应式 直接赋值reactive响应式对象 vuex中组合API赋值 结语 前言 vue3发布以来经历两年风头正盛,现在大有和react 平分天下的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了运行时的性能 凡事有利有弊, proxy虽然无敌,但是他也有本身的局限

  • 茶余饭后聊聊Vue3.0响应式数据那些事儿

    茶余饭后聊聊Vue3.0响应式数据那些事儿

    "别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了.既来之则安之,扶我起来我要开始讲了.Vue3.0 为了达到更快.更小.更易于维护.更贴近原生.对开发者更友好的目的,在很多方面进行了重构: 使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual

  • 关于Vue3中的响应式原理

    关于Vue3中的响应式原理

    目录 一.简介 二.响应核心 1.核心源码 2.逐步分析上述示例代码 3.收集依赖和触发依赖更新 三.V3.2的响应式优化 四.后话 一.简介 本章内容主要通过具体的简单示例来分析Vue3是如何实现响应式的.理解本章需要了解Vue3的响应式对象.只注重原理设计层面,细节不做太多讲解. 二.响应核心 1.核心源码 export class ReactiveEffect<T = any> { //是否激活 active = true //依赖列表 deps: Dep[] = [] // can b

  • 稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue

  • Vue3中的ref和reactive响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • 你了解vue3.0响应式数据怎么实现吗

    从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是"代理",ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层"拦截",返回一个新的代理对象,之后所有在Proxy中被拦截的属性,都可以定制化一些新的流程在上面,先看一个最简单的例子 const target = {}; // 要被代理的原对象 // 用于描述代理过程的handler const handler = { get: function (target,

  • Vue3.0数据响应式原理详解

    Vue3.0数据响应式原理详解

    基于Vue3.0发布在GitHub上的第一版源码(2019.10.05)整理 预备知识 ES6 Proxy,整个响应式系统的基础. 新的composition-API的基本使用,目前还没有中文文档,可以先通过这个仓库(composition-api-rfc)了解,里面也有对应的在线文档. 先把Vue3.0跑起来 先把vue-next仓库的代码clone下来,安装依赖然后构建一下,vue的package下的dist目录下找到构建的脚本,引入脚本即可. 下面一个简单计数器的DEMO: <!DOCTY

  • 40行代码把Vue3的响应式集成进React做状态管理

    前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到React中,可行吗?来试一试吧. 使用示例 话不多说,先看看怎么用的解解馋吧. // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count:

  • Vue3 的响应式和以前有什么区别，Proxy 无敌？

    前言 大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式. 举个例子: let vm = new Vue({ data() { return { a: 1 } } }) // ❌ oops,没反应! vm.b = 2 let vm = new Vue({ data() { return { a: 1 } }, watch: { b() { console.log('change !!') } } }) // ❌ oo

随机推荐