Question

Vue 3 与 Vuex 4

2021-06-30

356

vue.js vuex vuejs3 vuex4

我正在使用带有 Composition API 的 Vue 3，并试图了解如何直接从 Vuex 映射我的状态，以便模板可以使用它并通过 v-model 动态更新它。

mapState 有效吗？或者用其他方法可以解决这个问题？不，我需要通过 getter 获取我的状态，在模板中将其打印出来，然后手动提交我状态中的每个字段……在带有 Vuex 的 Vue 2 中，我有这个 100% 动态的

Answer 1

要在输入和存储 state 之间建立双向绑定，您可以使用 set/get 方法使用可写计算属性：

setup(){
  const store=useStore()

   const username=computed({
       get:()=>store.getters.getUsername,
       set:(newVal)=>store.dispatch('changeUsername',newVal)
    })

return {username}
}

模板：

<input v-model="username" />

Answer 2

我已经解决了！

辅助函数：

import { useStore } from 'vuex'
import { computed } from 'vue'

const useMapFields = (namespace, options) => {
const store = useStore()    
const object = {}

if (!namespace) {
    console.error('Please pass the namespace for your store.')
}

for (let x = 0; x < options.fields.length; x++) {
    const field = [options.fields[x]]
    
    object[field] = computed({
        get() {
            return store.state[namespace][options.base][field]
        },
        set(value) {
            store.commit(options.mutation, { [field]: value })
        }
    })
}


return object
}

export default useMapFields

在 setup() 中

       const {FIELD1, FIELD2}  = useMapFields('MODULE_NAME', {
            fields: [
                'FIELD1',
                 etc…
            ],
            base: 'form', // Deep as next level state.form
            mutation: 'ModuleName/YOUR_COMMIT'
        })

Vuex 突变：

    MUTATION(state, obj) {
        const key = Object.keys(obj)[0]
        state.form[key] = obj[key]
    }