반응형 vue37 [VUE] pinia 사용하기 (vuex 대신) - vue2, vue3 함께 사용 가능- vuex 보다 간단하고, 직관적임mutations 없음.Typescript 를 지원.아주 빠르고 정확한 autocompletionnamespaced modules 없음devtools 공식 지원 설치yarn add pinia# ornpm install pinia# orpnpm install pinia vuejs 의 main.js 에서import { createApp } from "vue";import { createPinia } from "pinia";import App from "./App.vue";const app = createApp(App);app.use(createPinia());app.mount("#app");vue2 를 사용한다면import { crea.. 2024. 5. 5. [Vue3] Vuex 에서 parameter 가 context? {commit}? 기본 파라메터 첫번째 파라메터는 호출할 때 따로 넘기지 않아도 됩니다. fetchQuery(context, param){ return new Promise((resolve, reject) => { axios .post('/user/query', param) .then(r=>resolve(r)) .catch(error => reject(error)) }) } 이렇게 첫번째 paramter 를 context (다른 이름도 가능 ctx 등..) 로 입력하면, 아래의 property 들이 보입니다. state 를 사용하려면 context.state getters 를 사용하려면 context.getters context 가 아니라 { } 를 사용해서 필요한것만 가져올 수도 있습니다. // fetchQuery(co.. 2023. 9. 5. [Vue] vuex 설치 yarn 사용 시 yarn add vuex npm 사용 시 npm install vuex --save yarn package.json 에 추가된 것 확인. 2023. 8. 20. [Vue3] Stand Alone #6. Component 만들기 Vuejs 3 Stand Alone Component 만들기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ npm build 없이 php 나 html 에서 사용하려면 .vue 를 import 못하기 때문에 js 로 component 를 만들어서 사용해야합니다. 우선 javascript 파일을 만듭니다. baseCard.js const BaseCard = { props:{ title: String, content: { type: String, default: "", description: "card content" }, but.. 2022. 3. 21. [Vue3] Stand Alone #3. v-for, :key Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ data 의 cars 배열을 for 문으로 li 들을 뿌려주는 예제입니다. v-for="item in cars" 로 반복을 합니다. :key 는 unique 한 값으로 입력을 해줘야 합니다. {{ item }} 배열의 문자열이 중복될 수 도 있으니 index 를 사용할 경우 아래와 같이 변경하면 됩니다. {{ item }} 문자열이 json list 일 경우 {{ item.name }} ({{ item.age }}) 결과 2022. 3. 20. [Vue3] Stand Alone #2. v-if, v-else-if, v-else, v-show Vuejs 3 if else Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ v-if 와 v-show 는 어떨때 써야할까? 짝수! 짝수! 이 두 코드는 보여지기에는 똑같습니다. v-if 는 더 높은 토글비용. v-show는 더 높은 랜더링 비용. 으로 생각하면 되는데요. 햇갈릴 경우엔, 예전 jQuery 에서 show 와 hide 는 존재하는 객체에 적용할 수 있는거이기 때문에 'show 는 무조건 객체를 만들고 시작해야 하는구나, 그럼 초기에 랜더링 비용이 들겠네..' 라고 생각하면 될거같습니다. 그래서 v-show 는 런타.. 2022. 3. 20. [Vue3] Stand Alone #1. vuejs CDN 및 기본 사용 Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ cdn 주소는 https://unpkg.com/vue@3 입니다. {{ message }} lesson.html 로 이름을 만들고 파일을 더블클릭 해서 실행 해 볼 수 있습니다. 기본적으로 이렇게 사용할 수 있습니다. npm 이나 vue cli 로 프로젝트를 만들고, webpack 등으로 빌드해서 사용할 수 있지만, 그럴 수 없는 환경(예를들어 웹 호스팅에서 지원안해줄 때, )일 경우에 cdn방식이나 로컬 js 를 include 해서 사용할 수.. 2022. 3. 20. 이전 1 다음 728x90 반응형
