vuex-mapState-mapMutations-mapActions

jiezi

5 年前

mapState
mapMutations
mapActions
vuex 在表单中的使用

因为 vuex state 定义的变量只能在 mutations 中修改，所以表单中的 v -model 绑定就会有问题，解决方案

...
<input type="text" v-model="username" />
...

computed: {
  username: {
      // 双向绑定 input 由于 vuex 中的数据只能在 mutations 中修改，所以当 username 数据发生变化的时候调用 vuex 文件中的方法
      get () {return this.$store.username},
      set (value) {this.$store.commit('mutations_username', value)
      }
    }
    ...

store/index.js 文件

...
state: {
    username: '',
    state: {
    show: true,
    dialog: true,
    formInfo: {username: ['zxc', 'hp'],
      email: '',
      password: '',
      passwordSure: '',
      address: '',
      number: 0,
      total: 0,
      search: '',
      searchResult: []}
  },
    ...
},
mutations: {mutations_username (state) {state.username = 'zhangxuchao'}
    ...

使用 mapState mapMutations mapActions

...
import {mapState, mapMutations, mapActions} from 'vuex'
...
methods: {
    ...mapMutations({
      'switch_show': 'switch_show',
      'switch_dialog': 'switch_dialog',
      'filterFun': 'filterFun'
    }),
    ...mapActions({'actions_show': 'actions_show'})
  },
computed: {
    // 从 vuex 文件中导入数据，相当于 data 中的饿数据
    ...mapState({
      formInfo: state => state.recommend.formInfo,
      dialog: state => state.recommend.dialog,
      show: state => state.recommend.show
    }),
    search: {
      // 双向绑定 input 由于 vuex 中的数据只能在 mutations 中修改，所以当 formInfo 数据发生变化的时候调用 vuex 文件中的方法
      get () {return this.formInfo.search},
      set (value) {// this.$store.commit('filterFun', value)
        this.filterFun(value)
      }
    }
  }