一段时间后，如何在小吃店自动关闭时更改 vuex 中的状态

Posted 2023-02-23

【中文标题】一段时间后，如何在小吃店自动关闭时更改 vuex 中的状态

【英文标题】：How to change state in vuex after some time while snackbar closes automatically

【发布时间】：2019-01-06 08:10:13

【问题描述】：

我使用 vuetify 组件创建了一个 Snackbar 组件，并将该 snapbar 组件导入到其他一些组件。我正在将道具从父母发送到孩子小吃店组件。小吃店会在一段时间后自动关闭。此时会出现错误，例如“避免直接更改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，请使用基于道具值的数据或计算属性”。

小吃店会在 3 秒后自动关闭。关闭小吃店后如何将状态设置为 false。

Snackbar 组件

<v-snackbar 
                :timeout="timeout"
                :color="color"
                :top="y === 'top'"
                :bottom="y === 'bottom'"
                :right="x === 'right'"
                :left="x === 'left'"
                :multi-line="mode === 'multi-line'"
                :vertical="mode === 'vertical'"
                v-model="snackbar"
            >
                 text 
                <v-btn flat color="pink" @click.native="snackbarClose"><v-icon>close</v-icon></v-btn>
            </v-snackbar> 

道具

props: ["snackbar", "y", "x", "mode", "timeout", "color", "close", "text", "submit"],

snackbar 组件中的方法

methods: 
        snackbarClose () 
            this.$store.commit("snackbarClose", false)
            // this.$emit('snackbarClose', false)
        
    

父组件

<Snackbar 
            :close="close"
            :snackbar="snackbarBox"
            :y="y"
            :x="x"
            :mode="mode"
            :timeout="timeout"
            :color="snackbarColor"
            :text="snackbarText"
            :submit="text"
        />

父组件中的数据

data()
return
 y: "top",
      x: "right",
      mode: "multi-line",
      timeout: 3000,
      text: "",
      color: "",
      close: "close",

在父组件中导入 getter

 ...mapGetters([ "snackbarBox"])

vuex 变异

snackbarClose: (state, payload) => 
        state.snackbarBox = payload
    ,

状态

snackbarBox: false,

吸气剂

snackbarBox: state => 
        return state.snackbarBox;
    ,

如何解决？

【参考方案1】：

我在准备 Snackbar 组件时遇到了同样的问题，我使用了一个观察器在“超时”完成之前更改了 $state。默认情况下，小吃吧会在 6 秒后关闭，但我使用 setTimeout 和 4 秒来修改状态并在 6 秒之前关闭它。 就我而言，我使用的是 ts，但我认为你可以使用它。

Snackbar 组件

<template>
  <div>
    <v-snackbar v-model="snackbarData.show"  :color="snackbarData.color" bottom >
      snackbarData.message 
    </v-snackbar>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import  Watch, Prop  from "vue-property-decorator";

@Component()
export default class SnackBar extends Vue 

@Prop(default:null)    
snackbarData!: Object 

 @Watch("snackbarData.show",  deep: true )
  onShowChanges(value: any) 
    if (value === true) 
      const snackbar: any = 
        show: false,
        message:'',
        color: null, 
     ;
    setTimeout( () => 
      this.$store.commit('updateMainSnackbar', snackbar);
      , 4000)
   
  

已存储

这是我的对象，但如果您需要更多属性，您应该添加它们。

   mainSnackbar: 
        show: false,
        message: '',
        color: null
    

变异

  updateMainSnackbar (state:any, data: any)
      state.mainSnackbar.show = data.show;
      state.mainSnackbar.message = data.message;
      state.mainSnackbar.color = data.color;
    

导入并包含组件

导入组件并传递属性

<template>
   <SnackBar :snackbarData="mainSnackbar" />
</template>

// ----------
<script lang="ts">
import Vue from "vue";
import  Component  from "vue-property-decorator";

import SnackBar from "SnackBar.vue"
@Component(
  components:  SnackBar 
)
export default class OurComponent extends Vue 

// Computed

 get mainSnackbar()
    return this.$store.state.mainSnackbar;
  

执行突变以激活 Snackbar

使用要在快餐栏中显示的数据调用突变。就我而言，我使用的是一种方法。

setSnackBar()
  const data= 
        show: true,
        message:'The message you want to show',
        color: '#ffff', 
     ;
  this.$store.commit('updateMainSnackbar', data);

希望对你有帮助。

【参考方案2】：

你能在Snackbar component看snackbar吗？

类似：

watch: 
  snackbar: function(newVal) 
    if (!newVal) 
       this.snackbarClose()
    
  

【讨论】：

没有手表