代码之家 › 专栏 › 技术社区 › Artur Müller Romanov

有没有办法将无功存储值分配给无功状态?

vue-reactivity store vuejs3 state vue.js

0

Artur Müller Romanov · 技术社区 · 4 年前

我有一个反应性存储 store.js :

import {reactive} from "vue";

const re = reactive({})

export default {
    re
}

我在组件内部使用它来分配文本值:

store.re.blog = 'Hello World!'

如何将此值分配给 state 在另一个组件内部?我尝试过:

const state = reactive({
    content1: store.re.blog || '',
    content2: store.re.blog ? store.re.blog : ''
})

两者都不起作用。我想把价值放在 状态 因为在下一步中,我将发送 状态 对象通过 ajax 请求到数据库。

我正在使用 vue 3 具有 script setup

0 回复 | 直到 4 年前

1

-1

Adri HM 4 年前

它对我有效:

应用.vue:

<template>
  <HelloWorld />
  <OtherComponentReceivingStoreValue />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import OtherComponentReceivingStoreValue from "@/components/OtherComponentReceivingStoreValue.vue";

export default defineComponent({
  name: 'App',
  components: {
    OtherComponentReceivingStoreValue,
    HelloWorld
  }
});
</script>

HelloWorld.vue:

<template>
  Component that initialize the store blog value
</template>

<script lang="ts" setup>
import store from '@/store'

store.re.blog = 'Hello World!'
</script>

组件读取商店:

<template>
  <div>
    store value:
    {{ state }}
  </div>
</template>

<script lang="ts" setup>
import store from '@/store'
import {reactive} from "vue";

const state = reactive({
  content1: store.re.blog || '',
  content2: store.re.blog ? store.re.blog : ''
})
</script>

如果你想要的是在第一个组件改变存储时更改接收器组件中的存储,你必须放置一个手表或进行计算。