DEV Community

loading...
Cover image for How to use and initialize vuex in the new vue 3 preview

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

daniel_adekoya_ profile image Deadkill ☄🚀 Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

What we want to type is

npm install vuex@next
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')

Enter fullscreen mode Exit fullscreen mode
import { createApp } from 'vue'
import App from './App.vue'
import store from "./store/store"


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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

If this is all new to you, check the official docs on more info on how the composition API works
Stay blessed, stay safe and keep coding

#EndSARS

Discussion

pic
Editor guide
Collapse
coulke profile image
CoulKe

const store = createStore({
state:{
name: "Vue"
}
})// ==>You forgot that closing bracket