#Vue#Nuxt 초보자를 위한 – Vuex에서store를 사용하여 버튼을 누르면 수량이 증가하는 간단한 카운터를 만들 수 있습니다(simple counter example)

NOTE

Nuxt 프로젝트 미리 만들기yarn create nuxt-app my-project

고전 모드와 모듈 모드가 있는 것 같지만 고전 모드는 폐지할 계획인 것 같아서 모듈 모드를 이용한다(모드의 차이를 잊어라)

store/increments.js

아주 간단한 쓰기

state에서 상태 정의

mutations에서 변경 처리 쓰기

export const state = () => ({
  count: 1
})

export const mutations = {
  increment (state) {
    state.count++
  },
}

pages/increment.vue

Vue script의 method에서store의 처리를 호출(포장 처리 느낌)

computed에서 값을 계산하고 Vue 템플릿의 {{ count }}과 연결

$store.commit의 매개 변수는 $store.commit('storeのファイル名/storeの関数名)의 형식으로 대응하는 것 같다


// https://nuxtjs.org/guide/vuex-store/

<template>
  <div>
    <div>
      <h1> {{ count }} </h1>
      <input type="button" @click="incrementCounter" value="Increment!">
    </div>
  </div>
</template>

<script>

export default {
  computed: {
    count () {
      return this.$store.state.increments.count
    }
  },
  methods: {
    incrementCounter (e) {
      this.$store.commit('increments/increment')
    }
  }
}
</script>

<style>
body {
  text-align: center;
}
</style>

이렇게 component에 대한 호출과 값을 얻는 것은 모두 랩으로 쓴 것으로 약간 우회적인 느낌이 들지만 이런 것으로 기억하십니까

store의 구조와는 전혀 상관없지만 이 예에서 최고급 component이기 때문에 export default라는 이름이지만 특별한 export의 느낌은 없지만 개의치 않는다(근본적으로 Vue를 이해하기 어려운 곳이라고 생각한다...)

행위

yarn dev에서 시작할 때
액세스 http://localhost:3000/increment 및 버튼 누름

참고 자료

왜 카운터의 예와 TODO 목록의 예가 함께 나타나는지...

고전 모드, 모듈 모드, state, mutation, 쓰기 종류가 잘 모르겠어요. 공식 문서도 너무 단편적이어서 싫어요.

Original by Github issue

Reference

이 문제에 관하여(#Vue#Nuxt 초보자를 위한 – Vuex에서store를 사용하여 버튼을 누르면 수량이 증가하는 간단한 카운터를 만들 수 있습니다(simple counter example)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YumaInaura/items/0f1f09d347686f35ebf3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다