I am trying to use axios.get to retrieve data from my database, but I encountered an error.
Below is my code in store.js
export default new Vuex.Store({
state: {
test: null
},
mutations: {
testt(state, payload) {
state.test = payload;
}
},
actions: {
testFun({ commit }) {
axios.get("http://localhost:8070/beer").then(response => {
let test = {
id: response.data.data.id,
title: response.data.data.title,
subtitle: response.data.data.subtitle
};
commit("testt", test);
});
}
}
});Here is the code in my app.vue file
<script>
import { mapState, mapActions } from "vuex";
export default {
props: {
source: String
},
data: () => ({
drawer: null
}),
computed: {
...mapState(["isLogin"])
},
methods: {
...mapActions(["testFun"])
}
};
</script> <v-list-item router :to="{name: 'test'}" exact @click="testFun()">
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>test</v-list-item-title>
</v-list-item-content>
</v-list-item>This is my testt.vue code
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["test"])
},
data() {
return {
beer: []
};
},
mounted() {
//
}
};
</script><template>
<div>
<h1>Beer List</h1>
<div v-for="beer in test" :key="beer.id">{{ beer.title }}</div>
</div>
</template>I have set up the router and verified that my database is working correctly because testing the path on my controller works, but it's not working in Vue.
However, I am getting an error message: TypeError: Cannot read property 'title' of null