Vue3 프로젝트 - Vue시작하기: Fruit List(Vuex예제)

1. vue/cli 설치

npm i -g @vue/cli

 

2. 프로젝트 생성

vue create . //해당 폴더에 생성

 

3. 라이브러리 설치

npm i -g reset-css
npm i vuex@next

4. App.js

<template>
  <div id="app">
    <h1 id="app-title">Fruits List</h1>
    <div id="fruits-table">
      <FruitsList></FruitsList>
      <FruitsPrice></FruitsPrice>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Mycom from './components/Mycom.vue';
import FruitsList from './components/FruitList.vue'
import FruitsPrice from './components/FruitPrice.vue'

export default {
  name: 'App',
  components: {
    FruitsList,
    FruitsPrice,
  }
}
</script>

<style>
  @import url("css/app.css");
</style>

 

5. /components/FruitList.vue

<!--FruitsList.vue-->
<template>
  <div id="fruits-list">
    <h1>Fruits Name</h1>
    <ul>
      <li v-for="fruit in fruits" :key=fruit>
        {{ fruit.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    // Removed Props
    computed: {
      fruits() {
        return this.$store.state.fruits
      }
    }
  }
</script>

<style></style>

 

6. /components/FruitPrice.vue

<!--FruitsPrice.vue-->
<template>
  <div id="fruits-price">
    <h1>Fruits Price</h1>
    <ul>
      <li v-for="fruit in fruits" :key="fruit">
        $ {{ fruit.price }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    // Removed props
    computed: {
      fruits() {
        return this.$store.state.fruits
      }
    }
  }
</script>

<style></style>

 

7. store/store.js

// store.js

import  {createStore} from 'vuex';


//export const store = createStore({
export default createStore({
  // 상태
  state: {
    fruits: [
      { name: 'Apple', price: 30 },
      { name: 'Banana', price: 40 },
      { name: 'Mango', price: 50 },
      { name: 'Orange', price: 60 },
      { name: 'Tomato', price: 70 },
      { name: 'Pineapple', price: 80 }
    ]
  }
});

8. main.js

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store/store.js'

createApp(App)
.use(store)
.mount('#app')

9. App.css

reset.css가 잘 안불러와질 때가 있네요. 설정 고치는 일이 어려워 일단 생략하고 진행합니다.

/*app.css*/
/* @import url("~reset-css/reset.css"); */
#app-title {
  color: orangered;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding: 40px 0 20px 0;
}
.fruits-table {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  text-align: center;
  padding: 0 20px;
}
.fruits-table li {
  padding: 20px;
  border-bottom: 1px dashed grey;
  color: white;
  list-style: none;
}
.fruits-table li:last-child { border-bottom: none; }
.fruits-table li:hover { background: rgba(255,255,255,.2); }

#fruits-list {
  background: orange;
  flex: 1;
}
#fruits-price {
  background: tomato;
  flex: 1;
}
#fruits-list h1,
#fruits-price h1 {
  font-weight: bold;
  font-size: 20px;
  padding: 20px;
  border-bottom: 1px solid;
}