Как в vuex.js сохранить в «хранилище» текст, введенный во вход?Где я допустил ошибку?

Question

мучаюсь третий день. Помоги мне, пожалуйста. Как в vuex.js сохранить текст, введенный на входе в «хранилище», а затем добавить его к значению того же самого ввода.

Я пытаюсь сделать это так, но где-то я ошибаюсь.

HTML

<f7-list-input
  label="Username"
  name="username"
  placeholder="Username"
  type="text"
  :value="newUserName"
  @input="username = $event.target.value"
  required validate
  pattern="[3-9a-zA-Zа-яА-ЯёЁ]+"
  v-model="saveUserName"
/>

SCRIPT

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    signIn() {
      const self = this;
      const app = self.$f7;
      const router = self.$f7router;
      router.back();
      app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
        router.back();
      });
    },
    saveUserName(){
        this.$store.commit(saveName);
    }
  },
  computed:{
     userName(){
         return this.$store.state.newUserName;
     }
  }
};

STORE

export default new Vuex.Store({
    state:{
        userNameStor: 'newUserName',
        userPasswordStor:''
    },
    mutations:{
        saveName(state){
            userNameStor:newUserName;
            return newUserName;
        }
    }
});

Answer 1

Давайте объясним всю функциональность, а затем немного кода.

Входные данные находятся в части шаблона компонента.

Компонент содержит также часть скрипта, которая запускает код на основе событий шаблона и так далее. Код компонента может вызывать мутации (для изменения состояния), которые используются для хранения чего-либо в хранилище.

у вас есть этот экран для хранения потока:

1 / событие шаблона компонента => 2 / код сценария компонента => 3 / выполнить мутацию в хранилище

Для другой стороны у вас есть это: state => mapMutation в вычисляемом свойстве компонента => шаблон компонента.

Внутри скрипта компонента вы можете отобразить значение магазина в вычисляемое свойство компонента (с помощью помощника mapMutations). Затем вы отображаете это поле в своем шаблоне из вычисляемого свойства компонента.

1 - Ваш шаблон @input - это событие, происходящее при изменении ввода пользователем. : значение - это значение ввода, определенное программно. v-модель - это сокращение для одновременного использования @input и: value. Не используйте его с: value и @ input.

Хорошо, минимальный шаблон:

<f7-list-input
  type="text"
  :value="username"
  @input="changeUsername"
/>

Внутри скрипта вам просто нужно связать метод changeUsername с мутацией (с mapMutation), а также определить вычисляемое свойство, именем которого является username и которое является картой имени пользователя из хранилища (с mapState).

import {mapState, mapMutations} from "vuex"

   export default {
      methods:{
         ...mapMutations({
        changeUsername:"saveName"
      },
      computed:{
         ...mapState({
            username:state=>state.username
        }),
      }
    };

Подумайте о том, чтобы посмотреть на Vue doc по этому поводу мутации и state