如果使用 vuex，如何使用 v 模型答案

【问题标题】：how to use v model if using vuex如果使用 vuex，如何使用 v 模型
【发布时间】：2021-09-15 15:35:55
【问题描述】：

如何在 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);
        }
    }
}

我尝试了 map state 和 map getter 都不起作用这是我的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.js vuex vuex-modules

【解决方案1】：

实际上，在调用 vuex 处理程序时，您的代码中有错字

import {mapState, mapActions } from 'vuex'; // check this line
import Test from '/components/Test'
  export default {
    components:{
      Test
    },
    computed: {
      dialog:{
        return this.dialog;
      },
      ...mapState('products',[ // check this line
        'dialog'
      ]),
    },
    methods:{
      ...mapActions('products',[ // check this line
        'closeCard', // check this line
      ])
    }
  }

另外请注意，您不应该直接将计算属性绑定到 v-model

【讨论】：

【解决方案2】：

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

您需要为您的计算值实现一个设置器。你可以阅读它here。

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

【讨论】：