How do you display store state in vue components?

In Vue.js, state management is typically handled through a state management library, with Vuex being the most common. However, you can also manage and display data using Vue's reactivity system with component-local state. I will provide examples for both approaches: using Vuex and using component-local state.

Managing State with Vuex

First, ensure you have installed and imported Vuex. Then, initialize a store and define state and getter methods.

1. Installing Vuex

If not installed, you can install Vuex via npm:

bash
npm install vuex --save

2. Creating the Vuex store

Create a store.js file in your project:

javascript
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

3. Using the Vuex store in Vue components

In your component, use computed properties to access state from Vuex:

javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getCount' // Using the getCount getter
    ]),
    count() {
      return this.getCount; // Returning the count from Vuex
    }
  },
  methods: {
    ...mapActions([
      'increment' // Using the increment action
    ])
  }
};
</script>

Using Component Local State

For smaller projects or when managing internal component state, directly define local state using the data function:

javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0 // Local state
    };
  },
  methods: {
    increment() {
      this.count++; // Updating local state
    }
  }
};
</script>

Both approaches can manage and display state in Vue components, with the choice depending on your application's complexity and requirements.