#### Repository
https://github.com/nuxt/nuxt.js
#### What Will I Learn?
- Access the state with ```mapState()``` in Vuex
- Access the state with ```$store``` in Vuex
- Create a search system
- Computed property
#### Resources
- Nuxt.js Website - https://nuxtjs.org/
- Nuxt.js Github. - https://github.com/nuxt/nuxt.js
- Axios- https://github.com/axios/axios
- JSON Placeholder- https://jsonplaceholder.typicode.com/
- Vuex - https://github.com/vuejs/vuex
#### Difficulty
Intermediated
### Tutorial Contents
This is the last series of CRUD Nuxt.js, Wwe have learned a lot about Nuxt.js in the previous tutorial we have learned the method of edit and update, in this tutorial I will add system search on ***Crud Nuxt*** application that we have created. We will use ```computed: {}``` property. for those of you who are familiar with Vue.js surely you also know ```computed: {}``` property. there will be changes we will make to adjust to our current code structure. for that we just start from to tidy up our code structure.
### Access the state through ```$store```
In the previous tutorial, we use ```mapState()``` to access the state on **Vuex**. but now we will learn how to access State by using ```$store```, we will change our code like the example below:
- **With ```mapState()```:**
``` javascript
computed: mapState([
'countries'
]),
```
If we want to access the **state in Vuex** by using **mapState**, We can directly put it on the ```computed:{}``` property and we can enter the state name we want to access, as a parameter of ```mapState()```. If the state we want to access more than one, we can pass it as an array ```mapState(['state1', 'state2','state3'])```.
<br>
- **With ```$store```**
There is another way if we want to access the state other than using ```mapState()```, we can access **the state** via ```$store.state```, to access the state using ```$store``` we must create a local variable in the ```data(){ }``` to store data from the state, here is an example:
``` javascript
data(){
return{
.....,
.....,
itemCountries : this.$store.state.countries
},
computed:{
searchCountries(){
return this.countries
}
}
```
- We create a local variable ```itemCountries``` to store the value of ```this.$store.state.countries```, ```countries``` is the name of the state name in **Vuex**.
- Then in the ```computed: {}``` property, we will create a function ```searchCountries()``` that returns ```return this.countries```, the value of the local variable in the ```data () {}```.
- After we set state, we will do the data looping in **v-for** in the component. We'll see the difference using **mapState** and **$store**.
**With mapState:**
``` html
<div class="col-sm-6">
<h3>List Of Countries</h3>
<div class="alert alert-primary" role="alert" v-for="item in countries" :key="item.id">
<p>Country : {{item.name}}</p>
<p>Capital City: {{item.city}}</p>
<button class="btn btn-warning" style="margin-right: 10px;" @click="editData(item)">Edit</button>
<button class="btn btn-danger" @click="doDelete(item.id)" >Delete</button>
</div>
</div>
```
```countries``` is the name of the state we access through ```mapState()```.
**With $store:**
``` html
<div class="col-sm-6">
<h3>List Of Countries</h3>
<div class="alert alert-primary" role="alert" v-for="item in searchCountries" :key="item.id">
<p>Country : {{item.name}}</p>
<p>Capital City: {{item.city}}</p>
<button class="btn btn-warning" style="margin-right: 10px;" @click="editData(item)">Edit</button>
<button class="btn btn-danger" @click="doDelete(item.id)" >Delete</button>
</div>
</div>
```
```searchCountries``` is a function name in the computed property that serves to return the value of the local variable in the ```data() {}```.
**searchCountries()**
``` javascript
computed:{
searchCountries(){
return this.itemCountries
}
}
```
If we run our application we should not get different results. We can see the results as shown below.
<br>
### Create a search system
After we see the difference of **mapState** and **$store**, we will make the system search by using the function ```searchCountries()``` we have created earlier in ```computed: {}```.
<br>
- **Create input search**
We will start by making the input search on the component that will be used by the user, in the input text, we will put ```v-model = "searchKey"``` to bind it with the local variable we will create in the ```data() {}```.
**Example:**
``` html
<div class="col-sm-6">
<h3>List Of Countries</h3>
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Country" v-model="searchKey">
</div>
<div class="alert alert-primary" role="alert" v-for="item in searchCountries" :key="item.id">
<p>Country : {{item.name}}</p>
<p>Capital City: {{item.city}}</p>
<button class="btn btn-warning" style="margin-right: 10px;" @click="editData(item)" >Edit</button>
<button class="btn btn-danger" @click="doDelete(item.id)" >Delete</button>
</div>
</div>
```
<br>
**Result:**
<br>
- **Create local variable in ```data()```**
After we create the input text in the component and add the **v-model** we will create a variable that will store the input data. We will store the data in ```searchKey:''``` according to the variable name in ```v-model = "searchKey"```.
**Example:**
``` javascript
data(){
return{
......,
......,
searchKey:''
},
```
<br>
- **Create search function in ```computed:{}```**
Then we will create a search system for the function we have created earlier that is ```searchCountries()```.
**Example:**
``` javascript
computed:{
searchCountries(){
return this.itemCountries.filter(country =>
country.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) !== -1 || country.city.toLowerCase().indexOf(this.searchKey.toLowerCase()) !== -1
)
}
}
```
- We will create the ```filter()``` to filter the values ββin the ```country.name``` object, then match the ```indexOf(this.searchKey)```.
- We can make a callback function with object ```country```, then we do the ```toLowerCase()``` function on the ***country object*** and ***this.searchKey*** to make the character to ***lower case***.
- We can make logic operator ```||``` **(or)** to search for objects from ***country.name*** and ***country.city***, so later we can do a search based on the name of **the country** and **the name of state capital**.
- and do not forget to return the value with ```return```. but before that we will check first whether the search has a result or not by the way ```!== -1```.
to see the results of the learning we have done, we can run our Nuxt.js application to see the results as shown below.
**The Result**
We can see in the picture, we have created a search system in the Nuxt.js application that we created. I hope you can develop it better. thank you for following my tutorial so far. hopefully this tutorial can help you.
#### Curriculum
[Learn Nuxt#1 Nuxt structure, Global CSS, Request API](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-1-nuxt-structure-installation-and-configuration-global-css-and-css-frameworks)
[Learn Nuxt#2 Vuex in Nuxt.js, Classic Mode and Modules Mode](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-1-vuex-in-nuxt-js-classic-mode-and-modules-mode)
[Learn Nuxt#3 Create components, Reusable components and Nuxt-link](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-3-create-components-in-nuxt-js-reusable-components-nuxt-link)
[Learn Nuxt#4 Dynamic components, Props, Transition page, Dynamic pages](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-4-dynamic-components-props-transition-page-dynamic-pages)
[Learn Nuxt#5 Create Database API, Request data, Setup Port](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-5-create-database-api-request-data-setup-port-database-and-nuxt-js-application)
[Learn Nuxt#6 Create Store in Vuex, Request data in Vuex, Data centralized](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-6-create-store-in-vuex-request-data-in-vuex-data-centralized)
[Learn Nuxt#7 mapActions, Submit data, Process data with Vuex](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-7-mapactions-submit-data-process-data-with-vuex)
[Learn Nuxt#8 Learn how to write mapActions, Delete data from API, Delete data with Vuex](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-8-learn-how-to-write-mapactions-delete-data-from-api-delete-data-with-vuex)
[Learn Nuxt#9 Put method,Edit data and Delete data from API](https://steemit.com/utopian-io/@duski.harahap/universal-vue-js-application-with-nuxt-js-part-9-put-method-edit-data-and-delete-data-from-api)
#### Proof of Work Done
https://github.com/milleaduski/learnNuxtjs
hiveblocks