时间戳

首页 > 解决方案 > 如果使用 vuex，如何使用 v 模型

vue.js - 如果使用 vuex，如何使用 v 模型

问题描述

如何在 vuex 上使用 v-model，在这种情况下，仅在此 vuex 中单击按钮时显示模态框也有单独的模块

这是索引模块

import createPersistedState from 'vuex-persistedstate'

import Vue from 'vue'
import Vuex from 'vuex'
import authentication from './authentication'
import products from './products'
import projects from './projects'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    baseUrl: '/api',
    // baseUrl: 'http://localhost:3333/api',
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    authentication,
    products,
    projects,
  },
  plugins: [
    createPersistedState(),
  ],
})

这是我的模块

import HTTP from '../http';

export default {
    namespaced: true,
    state:{
        dialog: false,
    },
    getters: {
        dialog(state){
            console.log(state.dialog)
            return state.dialog
        }
    },
    mutations: {
        closeCard(state){
            state.dialog=false;
            console.log(state.dialog);
        }
    }
}

我尝试了地图状态和地图获取器都不起作用，这是我的 vue 代码

v-model="dialog"      
width="500"

我尝试使用地图状态或地图吸气剂，但两者都不起作用

import Test from '/components/Test'
  export default {
    components:{
      Test
    },
    computed: {
      dialog:{
        get() {
          return this.$store.state.dialog.products
        },
      },
      map State('products',[
        'dialog'
      ]),
    },
    methods:{
      map Actions('products',[
        'close Card',
      ])
    }
  }

这是我的错误

Computed property "dialog" was assigned to but it has no setter.
found in

标签： vue.jsvuexvuex-modules

解决方案

将计算属性直接绑定到 v-model 是一种不好的做法，因为计算值没有默认设置器。

您将需要为您的计算值实现一个设置器。你可以在这里阅读。

您应该实现一个更改dialog属性值的状态操作，然后在您的 setter 中调用它（并将其设置为trueor false，具体取决于具体情况。

推荐阅读