How does vue put the data obtained by the interface in vuex

Vue is a popular JavaScript framework that helps developers build interactive and dynamic web applications. Vue is widely admired for its ease of use and flexibility. Vue also helps manage the data state of your application by providing a plugin called Vuex. Vuex is a state management pattern that centralizes all application state in one place in order to manage and ensure their synchronization between different parts.

When developing a web application using Vue, you usually need to get data from the server to render the view. This data can be obtained from the API via HTTP requests and then used in Vue components. In this case, Vuex can help us centralize data state so that it can be shared across the entire application.

In this article, we will introduce how to put the data obtained from the API in Vuex. We will use the following steps:

1. Create Vuex Storage
2. Get API data and store it in Vuex
3. Use stored data in Vue components

Create Vuex storage

To use Vuex to store data, we need to create a store.js file. In the store.js file, we first need to import Vue and Vuex. Then, we need to use Vue.use(Vuex) to register the Vuex plugin.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

In the store.js file, we will create a Vuex stores the instance that will contain the state we want to share.

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

}
})

In the above code, we define a state named data and provide a method named setData in mutations, which is used to store data in the data state.

Next, we need to export the store instance in order to use it in the Vue component.

Get API data and store it in Vuex

In Vue components, we can use axios or other HTTP libraries to get data from the API. In this article, we will use axios to get data.

In order to get the data and store it in Vuex, we need to call the actions method in the Vue component. In the store.js file, we will provide an actions method that will receive the data and call the setData method defined in mutations to store it in the data state.

The following is the complete code in the store.js file:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

},
actions: {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}
})

In the above code, we define an actions method named getData. This method uses axios to get data from the https://api.example.com/data address. When the acquisition is successful, it will use the commit method to call the setData mutations method to store the data in the data state.

Using stored data in Vue components

The state defined in the store.js file can be used in Vue components. Below is an example component that will get the data from the data state in the store.js file and display them in the template.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="item in data" :key="item.id">
    {{ item.name }}
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState, mapActions } from 'vuex'

export default {
computed: {

...mapState(['data']),

},
created() {

this.getData()

},
methods: {

...mapActions(['getData']),

}
}
2cacc6d41bbb37262a98f745aa00fbf0

In the above code, we use the mapState and mapActions methods provided by Vuex. Using mapState, we map the data state to the component's computed properties. Using mapActions, we map the getData actions method to the component's method.

When the component is created, we will call the created hook function and call the getData method in it to load the data into the data state in the store.js file. We can loop the obtained data through the v-for instruction and display it in the template.

Conclusion

The process of storing data obtained from the API in Vuex is as described above. We can use Vuex to manage the state of the application so that data can be shared throughout the application. In Vue components, we can use mapState and mapActions methods to access data and methods stored in Vuex.

The above is the detailed content of How does vue put the data obtained by the interface in vuex. For more information, please follow other related articles on the PHP Chinese website!