Mutations

Utilizando mutations con composition API:

<template>
  <div class="profile">
    <div class="box">
      <img src="/avatars/avatar.jpg" alt="avatar" />
      <label for="username">Nombre de usuario</label>
      <input
        type="text"
        placeholder="Jane Smith"
        :value="username"
        @input="actualizar($event.target.value)"
      />
      <button>Acceder</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();

const username = computed(() => store.state.username);

const actualizar = (value) => store.commit("updateUsername", value);
</script>

Cómo modificar variables del store con mutatios

En el store

createStore({
	state() {
		return {
			variable: val,
		};
	},
	mutations: {
		modificar(state, val) {
			state.variable = val;
		},
	}.
});

En el componente destino

<input @input="modificar($event.target.value)" />

import { mapMutations } from "vuex";

export default {
	methods: {
		...mapMutations(["modificar"]),
	},
};

me costaba entender como usar los map de vuex es muy interesante

erre, pense q los getters eran los methods jejeje