How to use and initialize vuex in the new vue 3 preview
Tags: vue, vuex
Published: 2020-10-27 16:30:35

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 
```javacript
 vue create app
``` 
and Select the vue 3 preview.
```javascript
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.
```javascript
npm install vuex
``` 
What we want to type is 
```javascript
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](https://vuex.vuejs.org/guide/) 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
```javascript
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
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import store from "./store/store"


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

```

```javascript
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 
```javascript
<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
```javascript
<script setup>
import store from '../store/store'
      export const data= store.state.name

</script>
```
And this is done with the [syntax sugar](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md)  from vue 3 composition api

The other way is this 
```javascript
<script>
import store from '../store/store'
   export default{
      setup(){
         const data = store.state.name

         return{
            data
         }
      }
   }


</script>
```
If this is all new to you, check the official docs on more info on how the [composition API](https://composition-api.vuejs.org/) works
Stay blessed, stay safe and keep coding
# #EndSARS