작은프로젝트 컴포넌트의 data -> vuex state의 방법

[이재창]

작은 프로젝트 하나 하고잇는데

//Home.vue

<template>
    <div class="page">
       
        <TopMenu></TopMenu>
        <div class="Container d-flex w-100">
            <!-- 왼쪽 사이드 메뉴 컴포넌트 -->
          <sideMenu/>
           <!-- 에디터  -->
            <div class="imageEditorApp">
                <tui-image-editor ref="editor" :include-ui="useDefaultUI" :options="options"></tui-image-editor>
            </div>
            <!-- 오른쪽 사이드바 컴포넌트 -->
            <RightMenu/>
     
        <!-- 오른쪽 사이드바끝 -->
        </div>
    </div>
</template>
<script>

    import {ImageEditor} from "@toast-ui/vue-image-editor";
    import TopMenu from './TopMenu.vue';
    import SideMenu from './SideMenu.vue';
    import RightMenu from './RightMenu.vue';

    export default {
        name: "home",
        components: {
            TopMenu,
            SideMenu,
            RightMenu,
            "tui-image-editor": ImageEditor
        },
        data() {
            return {
                useDefaultUI: true,
               
                options: {
                    cssMaxWidth: window.innerWidth,
                    cssHeight: window.innerHeight,
                    includeUI: {
                        locale : {
                            ZoomIn:'줌인',
                            ZoomOut: '줌아웃',
                            Crop : '자르기',
                            Load : '업로드',
                        }
                       
                       
                    },
                    initMenu: "filter",
                },
                result :this.$refs
            };
        },
       
    };
</script>
<style scoped="scoped">
    .imageEditorApp {
        width: 95vw;
        height: 93vh;
    }
</style>

 

<hr />

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    menu: 0,
    active: 'active',
    images:[],
    editdata: '',
    upload: ''
   
  },
  getters: {
  },
  mutations: {
    setimages(state, data) {
    state.images = data
    },
   mainmenu(state,data){
     state.menu = data;
   },
   activemenu(state,active){
     state.active = active;
   },
   Editor(state,data){
     state.editdata = data;
    const pre = state.editdata.editor
    const drawingMode  = pre.invoke('getDrawingMode');
    if (drawingMode == "CROPPER") {
      pre.invoke("startDrawingMode", "FREE_DRAWING");
  } else {
      pre.invoke("startDrawingMode", "CROPPER");
  }
   },
  },
  actions: {
   
    getimages(store){
    axios.get('https://api.unsplash.com/photos/random',{
      params: {
        client_id:'v0F7ccr-QO5x8jlZ2fKf8OqAYbCMjFOjUWRTyRRpwSM',
        count: 300
      }
    }).then((res)=>{
     
       // const result = res.data.map(image => image.urls.small);
        let result =[];
        for(let i = 0; i< res.data.length; i++ )
        {
          result.push(res.data[i].urls.small);
        }
        store.commit('setimages',result)
    })
    .catch((err)=>{ console.log(err);})
      }
      /*
    actions 쓸때는 ex) @click="$store.dispatch('함수명')"
    */
  },
  modules: {
  }
})

<hr />

<hr />

result :this.$refs

이거를 vuex의 state로 가져가서

다른 컴포넌트에서 쓰고 싶은데 계속 머리를 써봐도 잘 안되더라구요;;; 

home. vue 에서 

<b-button @click="$store.commit('Editor',result)">test</b-button>

이렇게 할수 잇지만  이걸 다른 컴포넌트에서 쓰이게 하고싶은데 방법을 모르겟습니다 ㅠㅠ

클릭하지 않고

즉 , data => vuex => state 에 담고 

mutation에서 함수 쓰게 하고 싶습니다.

<!--more-->

프로젝트 작업물 : <a href="https://github.com/jaechang1502/Vue_KetchupProject">https://github.com/jaechang1502/Vue_KetchupProject</a>

[codingapple]

data에 굳이 먼저 넣을 필요가 있을까요 

그냥 vuex에만 보관하면 다른 컴포넌트는 맘대로 쓸 수 있습니다 

[글쓴이]

글