@supper/vuexform

vuex state form map helper

Version: 1.0.0 Updated: 07/30/2019

By: supperbowen License: MIT

Downloads Last 30 Days: 13

Install

npm i @supper/vuexform
yarn add @supper/vuexform

Repository: https://github.com/supperbowen/vuex-from

CDNs

bundle.run: https://bundle.run/@supper/vuexform

jsDelivr: https://cdn.jsdelivr.net/npm/@supper/vuexform

unpkg: https://unpkg.com/@supper/vuexform

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'
}
Categories: Vue js