vue.js 기본틀 잡기 (dom 조절 및 , 함수 실행 등)

1. vue에서는 dom을 쓰지 않는다.

 

vue.js 는 익스텐션 툴을 써서 값을 받아온다.

확장도구에서 Vue dev tools를 써서 받아온다. 

받아올 경우 아래와 같이 확장 아이콘이 표시 된다.

vue dev tool 확장 아이콘

 

2. vue에서 바인딩 된 데이터를 다음과 같이 불러올 수 있다.

 

현재 electron 앱을 개발중인데 electron의 경우에는 앱이 실행되는 주소를 브라우져에서 띄워서 그대로 보면 된다.

 

3. vuex를 통하여 로그인 체크하는 state를 만든 후 id와 패스워드 가져오기

 

vuex - 다음과 같이 필요한 변수들을 state에 정의를 미리 해둔 후 , mutation을 정의하여 state를 변화시킬 값들을 정한다. 마지막으로 actions에서는 정의한 mutation을 이용하여 commit을 하게 되는데 이 commit이 진행되어야 상태변화가 일어난다. 마치 이더리움에서 상태변화가 일어나는 과정과 똑같은 프로세스여서 이해하기가 한층 수월하였다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    islogedin: false,
    loginID: "",
  },
  mutations: {
    login: function(state,param){
      state.islogedin=true;
      state.loginID=param;
    }
  },
  getters: {

  },
  actions: {
    getlogedin: async function(context, param) {
      context.commit('login',param)
    },
  },
  modules: {
  }
})

login.vue

<script>

import { mapState, mapActions } from 'vuex'

  export default {
    props: {
    },
    data: () => ({
      userid:'',
      userpw:'',
      logstate: ''
    }),
    methods: {
        ...mapActions(['getlogedin']),
        gologedin: function(){
            this.getlogedin(this.userid).then(()=>{
              if(this.islogedin){
                this.$router.push("/home");
              }
            });
        }
    },
    computed: mapState(['islogedin','loginID'])
  }
  
</script>

다음과 같이 vuex에서 정의한 값들을 이용하여 로그인을 할 시 홈페이지로 이동 시킵니다.

변수를 가져오는 부분은 mapState를 통해서 하고 data에 필요한 데이터를 정의해논 후에 아래와 같이 v-model을 사용하면 정의해 놓은 데이터에 해당되는 값들을 input에서 바로 가져와서 쓸 수 있습니다.

dom이 아닌 v-model을 써서 가져오는 것에 익숙해져야 한다고 합니다.

        <div>
          <v-text-field label="Main input" v-model="userid"></v-text-field>
          <v-text-field label="Another input" v-model="userpw"></v-text-field>
        </div>