Example using vuex using map helper

example-vuex-using-helper.js

// in this case Folder structure using nuxt.

// store/example.js
export const state = () => ({
  dataInput: "Hello guys!"
})

export const actions = {
  setDataInput({ commit }, payload) {
    commit('dataInput', payload.target.value)
  }
}

export const mutations = {
  dataInput(state, payload) {
    state.dataInput = payload
  }
}



// ExampleVuex.vue component
<template>
  <div>
    <input type="text" placeholder="Input..." @input="setDataInput" :value="dataInput" />
    <p>{{ dataInput }}</p>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("example", ["dataInput"]),
  },
  methods: {
    ...mapActions("example", ["setDataInput"]),
  },
};
</script>



// parent component
<ExampleVuex />