Vuex

Vuex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0/vuex.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<div id="app">
  <div v-for="n in $store.state.characters" class="character">
    <div>Name: {{ n.name }}</div>
    <div>Birth year: {{ n.birth_year }}</div>
  </div>
</div>

CSS

.character {
  font-family: monospace;
  margin: 10px;
  padding: 10px;
  border: 1px solid silver;
}

JavaScript

const store = Vuex.createStore({
  state: {
    characters: [],
  },
  mutations: {
    SET_CHARACTERS: (state, payload) => state.characters = payload,
  },
  actions: {
    GET_CHARACTERS: async (context) => {
      const response = await axios.get('https://swapi.dev/api/people/');
      context.commit('SET_CHARACTERS', response.data.results);
    },
  },
});

Vue.createApp({
  created() {
    this.$store.dispatch('GET_CHARACTERS');
  },
}).use(store).mount('#app');