VueX 및 스크립트 설정과 함께 양식을 사용하는 방법v-model을 사용합니까?

VueX 및 스크립트 설정과 함께 양식을 사용하는 방법v-model을 사용합니까?

편집:

VueX는 구식이고 피니아는 요즘 사람들이 사용하는 것이기 때문에 전혀 사용하지 말아야 합니까?

---

https://stackblitz.com/edit/vue-script-setup-with-vuex-hmrk5d?file=src/store.ts

양식 정보를 입력하고 "저장" 버튼을 클릭하면 양식 아래의 "결과" 섹션에 표시됩니다.

VueX 스토어 전체를 만들었습니다.돌연변이와 행동 그리고 이미 한 모든 것들.양식 작업으로 구현하는 방법을 모르겠습니다.

"v-model"을 사용합니까?아니면 디스패치 기능을 생성해야 합니까?그렇다면 디스패치 기능은 어디에 두나요?폼 요소의 "값" 및 "이름" 속성은 어떻게 여기에 포함됩니까?여기서의 프로세스는 양식 정보를 템플릿 대신 서버/데이터베이스에 제출하는 것과 동일합니까?

누가 이 코드를 도와줄 수 있습니까?

---

스토어.ts

import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    gender: '',
    name: '',
    job: '',
  }),
  getters: {
    currentGender: (state) => state.gender,
    currentName: (state) => state.name,
    currentJob: (state) => state.job,
  },
  actions: {
    changeGender({ commit }, { gender }) {
      commit('CHOOSE_GENDER')
    },
    changeName({ commit }, { name }) {
      commit('CHOOSE_NAME', name)
    },
    changeJob({ commit }, { job }) {
      commit('CHOOSE_GENDER', job)
    },
  },
  mutations: {
    CHOOSE_GENDER(state, gender) {
      state.gender = gender
    },
    CHOOSE_NAME(state, name) {
      state.name = name
    },
    CHOOSE_JOB(state, job) {
      state.job = job
    },
  },
})

요소.가치관

<template>
  <p>Vue Form Test</p>
  <form>
    <div class="nes-field">
      <label for="name_field">Character Name</label>
      <input placeholder="Enter name" type="text" name="name" id="name_field" class="nest-input"/>
    </div>
    <section>
      <label>
        <input type="radio" value="Male" class="nes-radio" name="gender" />
        <span>Male</span>
      </label>
      <label>
        <input type="radio" value="Female" class="nes-radio" name="gender" />
        <span>Female</span>
      </label>
      <label>
        <input type="radio" name="gender" value="Other" class="nes-radio" />
        <span>Other</span>
      </label>
    </section>
    <div class="nes-select job">
      <select name="job" id="default_select">
        <option value="" disabled>pick a job</option>
        <option value="mage">Mage</option>
        <option value="fighter">Fighter</option>
        <option value="druid">Druid</option>
        <option value="sorcerer">Sorcerer</option>
      </select>
    </div>
    <button>Save</button>
  </form>
  <br />
  <h1>Results:</h1>
  <h3>Name: {{name}}</h3>
  <h3>Gender: {{gender}}</h3>
  <h3>Job: {{job}}</h3>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const name = computed(()=>store.getters.currentName)
const gender = computed(()=>store.getters.currentGender)
const job = computed(()=>store.getters.currentJob)

const onSubmit = () => {

}
</script>

와 함께pinia당신은 심지어 필요하지도 않습니다.actions¹ 양식을 스토어와 동기화합니다.
사용자storeToRefs:

const { createPinia, defineStore, storeToRefs } = Pinia
const { createApp } = Vue

const useStore = defineStore("store", {
  state: () => ({
    gender: "",
    name: "",
    job: ""
  })
})

const pinia = createPinia()
const app = createApp({
  setup: () => ({
    ...storeToRefs(useStore()),
    genders: ["Male", "Female", "Other"],
    jobs: ["mage", "fighter", "druid", "sorcerer"],
    capitalize: (str) => str[0].toUpperCase() + str.substr(1)
  })  
})
app.use(pinia)
app.mount("#app")

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.29/pinia.iife.js"></script>

<div id="app">
  <p>Vue Form Test</p>
  <form>
    <div class="nes-field">
      <label for="name_field">Character Name</label>
      <input
        placeholder="Enter name"
        type="text"
        name="name"
        id="name_field"
        class="nest-input"
        v-model="name"
      />
    </div>
    <section>
      <label v-for="g in genders" :key="g">
        <input
          type="radio"
          :value="g"
          class="nes-radio"
          name="gender"
          v-model="gender"
        />
        <span v-text="g" />
      </label>
    </section>
    <div class="nes-select job">
      <select name="job" v-model="job">
        <option value="" disabled>pick a job</option>
        <option v-for="j in jobs" :key="j" :value="j">
          {{ capitalize(j) }}
        </option>
      </select>
    </div>
  </form>
  <br />
  <h1>Results:</h1>
  <h3>Name: {{name}}</h3>
  <h3>Gender: {{gender}}</h3>
  <h3>Job: {{job}}</h3>
</div>

---

와 함께vuex각 필드에 대해 계산된 값을 생성할 수 있습니다.예:

import { computed } from 'vue'
import store from '/path/to/store'
const name = computed({
  get() { return store.state.name },
  set(val) { store.commit('CHOOSE_NAME', val)
})
// now you can use `name` with `v-model`, as above.
// and you do the same for `gender` and `job`.

다른 방법은 다음과 같습니다.:value+@input패턴은, 당신이 배치하는 것을 제외하고는 거의 같습니다.get위에서부터computed안으로:value그리고set로 기능하는.@input예:

<input
  :value="store.state.name"
  @input="(e) => store.commit('CHOOSE_NAME', e.target.value)" />

---

¹ -pinia그룹 둘 다actions그리고.mutations아래actions그들은 돌연변이를 할 수 있습니다.state그리고 될 수 있습니다.async.
² 이러한 즉각적인 저장 기능을 사용하지 않고 사용자가 저장 시기를 선택할 수 있도록 하려면 구성 요소에 초기 저장 값을 저장하고, 해당 초기 값에서 로컬 상태(로컬 상태)를 생성한 후 양식에 이 반응형 개체를 사용할 수 있습니다.현재 개체의 값을 초기 개체와 비교하고 값이 다를 경우 저장 버튼을 활성화합니다.저장 버튼은 스토어 상태에 기록하는 기능을 호출해야 합니다.

언급URL : https://stackoverflow.com/questions/75180803/how-to-use-forms-with-vuex-and-script-setup-do-you-use-v-model