vuex input文本框的双向绑定

1、将state中的值同步到页面进行渲染

  // 存储数据
  state: {
    // 所有的任务列表
    list: [],
    // 文本框的内容
    inputValue: 'aaa'
  },

 
  //组件使用
  import { mapState} from 'vuex'

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

  :value="inputValue"

2、将文本框的内容变化----存储到state

组件：

   //组件
   @change="handleInputChange"

    methods: {
    // 监听输入文本框的内容变化
    handleInputChange(e) {
      // console.log(e.target.value)
      this.$store.commit('setInputValue', e.target.value)
    }}

vuex:

 mutations: {
   // 为store中的inputValue赋值
    setInputValue(state, val) {
      state.inputValue = val
    }
  }

 

调用mutations使用的是commit