首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在我的情况下,我希望推送输入值并将其存储在本地存储VUEX的数组中。我试过了,但不起作用

在你的情况下,你希望将输入值推送到本地存储的VUEX数组中,但是目前还无法实现。

为了实现这个功能,你可以按照以下步骤进行操作:

  1. 首先,在你的Vue组件中引入VUEX并创建一个数组存储输入值。在组件内部的data属性中添加一个名为"inputValues"的数组,用于存储输入的值。
代码语言:txt
复制
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      inputValues: [],
      inputValue: '' // 如果需要绑定输入框的值,可以使用这个变量
    };
  },
  methods: {
    ...mapMutations(['addToInputValues']),
    addValue() {
      this.addToInputValues(this.inputValue);
      this.inputValue = ''; // 清空输入框的值
    }
  }
}
  1. 接下来,在你的VUEX store中创建一个mutation,用于将输入值添加到存储数组中。打开store.js文件,添加一个名为"addToInputValues"的mutation,并在其中将输入值添加到state中的"inputValues"数组中。
代码语言:txt
复制
export default new Vuex.Store({
  state: {
    inputValues: []
  },
  mutations: {
    addToInputValues(state, value) {
      state.inputValues.push(value);
    }
  }
});
  1. 最后,在你的Vue组件中调用mutation,将输入值添加到VUEX数组中。在Vue组件的methods中调用VUEX的mutation方法"addToInputValues",并将输入值作为参数传递给mutation。
代码语言:txt
复制
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['addToInputValues']),
    addValue() {
      this.addToInputValues(this.inputValue);
      this.inputValue = ''; // 清空输入框的值
    }
  }
}

现在,当你在输入框中输入值并点击添加按钮时,输入值将会被推送到VUEX的数组中。

请注意,以上是基于Vue和VUEX实现的解决方案。对于前端开发来说,VUEX是一个常用的状态管理库,用于在Vue应用程序中管理共享的状态数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券