使用 Vuex 4 将数据设置为在 Vue 3 中不起作用的状态 [英] Setting data in state not working in Vue 3 with Vuex 4
问题描述
我正在使用 Vuex 4 学习 Vue 3，但我坚持使用一些我确信它很简单但我看不到的东西.
简而言之，我试图在 state 中设置一些数据，以便在我的组件中使用它，但它不起作用.
让我向您展示代码:
////store.js
import { createStore } from 'vuex';从 'axios' 导入 axios；const store = createStore({状态: {用户:{}，产品: []},突变:{SET_USER:(状态，用户)=>{state.user = 用户；},SET_PRODUCTS:(状态，产品)=>{state.products = 产品；},},动作:{GET_USER: 异步函数 ({ commit }) {const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')提交('SET_USER'，用户)},GET_PRODUCTS:异步函数({提交}){const products = await axios.get('https://coding-challenge-api.aerolab.co/products')提交('SET_PRODUCTS'，产品)},}})导出默认商店；////MyComponent.vue
<div class='bg-aerolab-main'>{{ 用户 }} {{ productsTest }}</模板>从vue"导入{计算}；从 'vuex' 导入 { useStore };导出默认{设置() {const store = useStore();常量用户 = 计算(() => store.state.user)；const productsTest = 计算(() => store.state.products);控制台日志(用户)；控制台日志(产品测试)；返回 {用户，产品测试};}}
////main.js
import { createApp } from 'vue'从'./App.vue'导入应用程序导入'./index.css'从 'axios' 导入 axios从'vue-axios'导入VueAxios；从./store"导入商店；const app = createApp(App)app.use(VueAxios, axios)应用程序使用(商店)app.mount('#app')当然，{{ users }} 和 {{ productsTest }} 绑定不显示任何数据以及 console.logs.
PD:我尝试直接在我的组件中获取数据并且它正在工作，因此它与从 API 获取的数据无关.
任何建议都会得到真正的赞赏.
先谢谢你！
你必须在挂载的钩子中分派这些动作:
import {calculated , onMounted} from vue";从 'vuex' 导入 { useStore };导出默认{设置() {const store = useStore();常量用户 = 计算(() => store.state.user)；const productsTest = 计算(() => store.state.products);onMounted(()=>{store.dispatch('GET_USER');store.dispatch('GET_PRODUCTS');})返回 {用户，产品测试};}}I'm learning Vue 3 with Vuex 4 and I'm stucked with something that I'm pretty sure it's simple but I can't see.
In few words, i'm trying to set some data in state to have it available to use it in my components but it isn't working.
Let me show you the code:
/// store.js
import { createStore } from 'vuex';
import axios from 'axios';
const store = createStore({
state: {
user: {},
products: []
},
mutations: {
SET_USER: (state, user) => {
state.user = user;
},
SET_PRODUCTS: (state, products) => {
state.products = products;
},
},
actions: {
GET_USER: async function ({ commit }) {
const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')
commit('SET_USER', user)
},
GET_PRODUCTS: async function ({ commit }) {
const products = await axios.get('https://coding-challenge-api.aerolab.co/products')
commit('SET_PRODUCTS', products)
},
}
})
export default store;
/// MyComponent.vue
<template>
<div class='bg-aerolab-main'>
{{ user }} {{ productsTest }}
</div>
</template>
import { computed } from "vue";
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const user = computed(() => store.state.user);
const productsTest = computed(() => store.state.products);
console.log(user);
console.log(productsTest);
return {
user,
productsTest
};
}
}
/// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import axios from 'axios'
import VueAxios from 'vue-axios';
import store from './store';
const app = createApp(App)
app.use(VueAxios, axios)
app.use(store)
app.mount('#app')
Of course the {{ users }} and {{ productsTest }} bindings are not displaying any data aswell as both console.logs.
PD: I've tried to fetch the data directly in my component and it's working so it's not something related to the data fetched from the API.
Any advices will be truly aprecciated.
Thank you in advance!
You've to dispatch that actions inside mounted hook :
import { computed , onMounted} from "vue";
import { useStore } from 'vuex';
export default{
setup() {
const store = useStore();
const user = computed(() => store.state.user);
const productsTest = computed(() => store.state.products);
onMounted(()=>{
store.dispatch('GET_USER');
store.dispatch('GET_PRODUCTS');
})
return {
user,
productsTest
};
}
}
这篇关于使用 Vuex 4 将数据设置为在 Vue 3 中不起作用的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
