How to use and initialize vuex in the new vue 3 preview

#vue #vuex

As we all know, vue js realeased their new vue 3 package (no longer in beta) and is packed with new features, like mainly the composition Api, etc.
And also they way it's eco-system plugins are initialized have been changed, yes they have.
I'm going to be talking about vuex and how to initialize it in a vue 3 app in this post. Ready, let's go.
First let's initialize a vue app with the vue cli

 vue create app

and Select the vue 3 preview.

Vue CLI v4.5.8
?Please pick a preset:
 Default([Vue 2] babel, eslint)
>Default(Vue 3 preview) ([Vue 3] babel, eslint)
 Manually select features

Once created now we install vuex. Now if we type in this command below, it will install the old version used for vue 2.

npm install vuex

What we want to type is

npm install vuex@next

and this is because vue 3's eco-systems are still in beta and we can install them by adding the @next to the command. This will install vuex 4 for you for vue 3.
So now we have it installed let's create our store in a store.js file, once done, we create a store by first importing createStore from vuex in our store.js
and initialize it this way

import { createStore } from "vuex" 

const store = createStore({
   state:{
      name: "Vue"
   }
})

export default store

Okay now we've created a simple store that has a state and the state has a data we can get from it but first let's make sure we use store in our app.
In your main.js fil, we have to import our store.js and make it available to our root component
A vue 3 app's main.js will look like this and we can use the store in this two ways

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


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

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


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

Now our store is available for us to use in our components

Now I'll show you how to access the store using the Options API (note you can still use the options API to build your vue 3 apps, it's optional to use the composition API) and new Composition API

Options API

<script>
    export default{
        data(){
            return{
                data: this.$store.state.name
            }
        }
    }

</script>

and now our name data from our store is available within the component scope

Now in the Composition API, it's a little different
First of all using the composition API we don't have access to the this keyword
This is one way of accessing the store in the Composition API

<script setup>
import store from '../store/store'
      export const data= store.state.name

</script>

And this is done with the syntax sugar from vue 3 composition api

The other way is this

<script>
import store from '../store/store'
   export default{
      setup(){
         const data = store.state.name

         return{
            data
         }
      }
   }


</script>