@supper/vuexform v1.0.0

vuex-from

描述

我们在表单中使用 vuex 时总会感觉到各种的不方便

• 每个属性都要指定一个 mutation 来更新
• 需要拆开 v-model 为 :value 和@input
• 界面中要单独声明一个更新的方法

这是让很多人放弃在表单中使用 vuex的原因，太笨太繁琐了

vuex 默认的表单方案

<template>
    <input :value="message" @input="updateMessage">
</template>

<script>
import {mapStates} from 'vuex'

export default {
    computed: {
    ...mapState({
        message: state => state.obj.message
    })
    },
    methods: {
        updateMessage (e) {
            this.$store.commit('updateMessage', e.target.value)
        }
    }
}
</script>

vuex from 解决方案：

安装

npm install --save vuexfrom

代码设置

main.js

import vuexform from '@supper/vuexform'
import store from '@/store'

vuexform.install(store)

vuex store module 'customer.js'

import {updateState} from '@supper/vuexform'

export default {
    namespaced:true,
    state:{
        current:{
            name:'bowen',
            age:18
        }
    },
    mutations:{
        updateState
    }
}

一般映射

<template>
    <div>
        <input v-model="name">
        <input v-model="age">
    </div>
</template>

<script>
import {mapFormStates} from '@supper/vuexform'
export default {
    computed:{
        ...mapFormStates('customer', ['current'])        
    }
}
</script>

添加映射前缀

<template>
    <div>
        <input v-model="cu_name">
        <input v-model="cu_age">
    </div>
</template>

<script>
import {mapFormStates} from '@supper/vuexform'
export default {
    computed:{
        ...mapFormStates('customer', ['cu:current'])
    }
}
</script>

属性逐个映射

<template>
    <div>
        <input v-model="cname">
        <input v-model="cage">
    </div>
</template>

<script>
import {mapFormStates} from '@supper/vuexform'
export default {
    computed:{
        ...mapFormStates('customer', [{cname:'current.name', cage:'current.age'}])
    }
}
</script>

已知问题

1. 必需要使用异步组件，否则在映射对象是会存在store还没有初始化的问题

// 组件中
export default {
  name: 'app',
  components: {
    HelloForm: () => import('./components/Form.vue')  // 需要用异步加载的组件，包括在 vue-router 时
  }
};

// 路由
{
    path: 'form',
    component: () => import('./components/Form.vue'),
    name: 'HelloForm'
}