使用vuex从其他组件更改v模型的值

时间:2018-06-25 06:00:53

标签: javascript vuejs2 vuex vuetify.js

我有2个组成部分 1.它是边栏导航1.顶部的标题,现在我要单击标题以关闭,打开边栏导航 通过侧边栏代码:

<v-navigation-drawer
    :clipped="$vuetify.breakpoint.lgAndUp"
    fixed
    v-model="sidebar"
    app
    v-if="$store.state.isUserLoggedIn"
  >

在计算中,我从标头操作中获取了更新值。

computed: {
    ...mapState([
      'sidebar'
    ])
  },

现在我想更新v-model 'sidebar'的值

我该怎么办?

谢谢。

1 个答案:

答案 0 :(得分:1)

我找到了简单的答案 1.只需将v-model="sidebar"更改为:value = "sidebar" 删除data

上的侧边栏

将侧边栏添加到计算的

computed: {
    ...mapState([
      'sidebar'
    ]),
  },

只需从标题添加操作

this.$store.dispatch('setDrawer', !this.$store.state.sidebar)

并在商店文件中创建变体和动作setDrawer

类似的东西

state: {
    sidebar: true
  },
mutations: {
 setDrawer (state, sidebar) {
      state.drawer = sidebar
    }
} 
actions: {
setDrawer ({commit}, sidebar) {
      commit('setDrawer', sidebar)
    }
}