在Vuetify中管理覆盖被解雇组件的状态

Question

我是第一次构建 Private Sub Print(Optional ByVal PPreview As Boolean = False) ErrorProvider1.Clear() ErrorProvider2.Clear() If UltraTextEditor3.Text > UltraTextEditor6.Text Then ErrorProvider1.SetError(UltraTextEditor3, "From Date Must Be Earlier Than Through Date.") ErrorProvider2.SetError(UltraTextEditor6, "Through Date Must Be Later Than From Date.") Return End If Try Dim report As C1.Win.C1Report.C1Report = C1Report1 System.Windows.Forms.Cursor.Current = Cursors.WaitCursor Dim pd As PrintDocument If My.Application.Info.AssemblyName.Contains("Laser") Then pd = C1Report1.Document Else pd = SetPrinter(OTF_Forms, C1Report1, Me) End If pd.PrinterSettings.PrinterName = pd.DefaultPageSettings.PrinterSettings.PrinterName PushFormValues(report) RequestInfo() If PPreview Then Dim preview As New Previewer preview.C1PrintPreview1.Document = pd preview.ShowDialog() Else pd.Print() End If System.Windows.Forms.Cursor.Current = Cursors.Default Me.btnClose.Focus() ctrlkey = False Me.btnPrint.Text = "Print" Catch ex As Exception MsgBox(ex.Message) End Try End Sub 前端，我已将vuetify/nuxt组件移出v-navigation-drawer布局，并将其移入其自己的组件中，以便它可以在多种布局中重复使用。

此抽屉的激活器仍保留在default.vue组件中，因此我向vuex添加了default.vue状态：

sidebar

侧边栏的mutator看起来像这样：

export const state = () => ({
    baseurl: 'http://example.com/api/',
    sidebar: false,
    authenticated: false,
    token: null,
    user: null,
})

这在打开抽屉时非常有效，但由于抽屉通过单击叠加层或单击侧边栏（如果您关闭了遮盖物）而被解除，因此vuex会抛出一个巨大的错误：

如何通过vuex使其正常工作？

Answer 1

不是将抽屉模型直接绑定到$store.state.sidebar，而是使用抽屉组件中的计算设定器。请注意，您必须从抽屉本身传递新值，而不是只切换商店中已有的任何内容。

<template>
  <v-navigation-drawer v-model="drawer" ...>
</template>

<script>
  export default {
    computed: {
      drawer: {
        get () {
          return this.$store.state.sidebar
        },
        set (val) {
          this.$store.commit('sidebar', val)
        }
      }
    }
  }
</script>

// vuex mutation
sidebar (state, val) {
  state.sidebar = val
}

https://vuejs.org/v2/guide/computed.html#Computed-Setter
https://vuex.vuejs.org/en/forms.html

另一个选择是分别绑定prop和event

<template>
  <v-navigation-drawer :value="$store.state.sidebar" @input="$store.commit('sidebar', $event)" ...>
</template>

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Answer 2

另一种解决方案是使用 vuex-map-fields 包，它为保存在 Vuex 存储中的状态启用双向数据绑定。

它使代码比正常方式更清晰、可读（如已接受的答案）。

基本示例：

在您的商店文件中

// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from 'vuex-map-fields';

export const state = () => ({
    baseurl: 'http://example.com/api/',
    sidebar: false,
    authenticated: false,
    token: null,
    user: null,
})

export const getters = {
   // Add the `getField` getter to the
   // `getters` of your Vuex store instance.
   getField,
}

export const mutations = {
   // Add the `updateField` mutation to the
   // `mutations` of your Vuex store instance.
   updateField,
}

在您的组件中

template>
  <v-navigation-drawer v-model="sidebar" ...>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields([
      'baseurl',
      'sidebar',
      // etc...
    ]),
    }
  }
</script>

有关更多详细信息，您可以查看其githab page