Блог

Главная - Вопросы по программированию - Vue 3 с Vuex 4

Vue 3 с Vuex 4

#vue.js #vuex #vuejs3 #vuex4

Вопрос:

Я использую Vue 3 с API композиции и пытаюсь понять, как я могу напрямую сопоставить свое состояние с Vuex, чтобы шаблон мог его использовать и обновлять на лету с помощью v-модели.

mapState Работает ли что-то еще для решения этой проблемы? Правильно, нет, мне нужно получить свое состояние с помощью геттера, распечатать его в шаблоне, а затем выполнить ручную фиксацию для каждого поля в моем состоянии… В Vue 2 с Vuex у меня была эта 100% динамика

Комментарии:

1. пожалуйста, поделитесь кодом

Ответ №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" />

Комментарии:

1. Я понимаю, что ты имеешь в виду, это единственный способ? Допустим, у вас есть примерно 10-15 полей, затем вам нужно вычислить по одному для каждого поля, я надеялся, что у Vuex есть что-то, что автоматически сопоставит это для вас

2. @nahoj Afaik это запланировано на Vuex 5. В настоящее время вы можете воспользоваться своей собственной вспомогательной функцией, которая соответствует вашим потребностям

3. Я понимаю.. У вас есть какие-либо примеры для подобной вспомогательной функции?

4. @BoussadjraBrahim Это общий вопрос, а не кодовый. Я знаю, что вы можете использовать, добытчик и сеттер.. Я искал функцию динамической карты.

5. Если бы вы могли привести пример, который был бы полезен

Ответ №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

И в настройке()

        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]
    }
Метки: