구르는 돌에는 이끼가 끼지 않는다

sudo npm install -g @vue/cli @vue/cli-init

vue init nativescript-vue/vue-cli-template [프로젝트명]

? Project name jw_sh_calc_prj

? Project description It is calculator application

? Application name CalcPrj

? Unique application identifier org.nativescript.application

? Project version 1.0.0

? Author

? License MIT

? Select the programming language javascript

? Select a preset (more coming soon) TabView

? Install vuex? (state management) No

? Install vue-devtools? No

? Color scheme light

vue-cli · Generated "[프로젝트명]".

vue-cli · cd [디렉토리명]

vue-cli · npm install

vue-cli · tns run android --bundle

vue-cli · # or

vue-cli · tns run ios --bundle

vue-cli · --

vue-cli · You may also try the new HMR mode by replacing --bundle

vue-cli · with --hmr, but note that this is a beta feature.

VisualStudioCode에 터미널에서 다음 명령어를 실행한다

• 예뮬레이터로 실행할 경우

tns run android --emulator --bundle

• 실제 기기에서 실행할 경우

tns device

tns run android --device [디바이스 식별자] --bundle

vuex 사용하기

vuex 기능 중 하나는 store.js에 저장된 getters나 state 값을 다른 컴포턴트에서 사용가능하게 한다.

//store.js파일 
state: { 
    allUsers:[
      {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'},
      {userId: 'max123', password: '456', name: 'Max', address: 'Berlin', src:'https://goo.gl/Ksk9B9'},
      {userId: 'lego123', password: '789', name: 'Lego', address: 'Busan', src:'https://goo.gl/x7SpCD'}
    ]
  },
  getters:{ 
    allUsersCount: state => {
      return state.allUsers.length      
    },
    countOfSeoul: state =>{
      let count = 0
      state.allUsers.forEach(user => {
        if(user.address === 'Seoul') count++
      })
      return count
    },
    percentOfSeoul: (state, getters) => {
      return Math.round(getters.countOfSeoul/getters.allUsersCount * 100)
    }
  }

store.js파일을 자식 컴포넌트에서 사용할 수 있도록 하기 위해서는 다음 코드를 추가합니다.

import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      
    }
  },
  computed:{
    ...mapGetters({
      count : 'allUsersCount', 
      seouls : 'countOfSeoul',
      percent : 'percentOfSeoul'
    }), 
    ...mapState(['allUsers'])
  },
  
  ...

위와 같이 store.js에 있는 getter, state에 정의된 값을 사용하기위해서는 import를 추가합니다. 그리고 computed를 내에 ...mapGetters, ...mapState function을 이용하여 store.js에 정의 된 값을 사용하고, ...mapGetters내에서 해당 값을 key 값으로 새롭게 정의 가능합니다.

  <h1>All Users({{ count }})</h1>
    <h1>Seoul Users : {{ seouls }} ({{ percent }}%)</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in allUsers"
        :key="index"
        avatar
      >

DOM 태그 부분에서는 최종적으로 vuex를 사용해서 가져온 값을 바인딩 시켜줍니다.

[출처]

맨땅에 개발하기

https://www.youtube.com/watch?v=wKMQ0EmpyBo&list=PLZzSdj89sCN292abcbI3utND8pA1T1OyB&index=6