javascript - 使用 Vuex 4 在 Vue 3 中设置状态数据不起作用
问题描述
我正在使用 Vuex 4 学习 Vue 3,我被一些我很确定它很简单但我看不到的东西困住了。
简而言之,我正在尝试设置一些数据state
以使其可用于我的组件中,但它不起作用。
让我给你看一下代码:
/// 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;
/// 我的组件.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')
当然,{{ users }}
和{{ productsTest }}
绑定不显示任何数据以及console.logs。
PD:我试图直接在我的组件中获取数据并且它正在工作,因此它与从 API 获取的数据无关。
解决方案
您必须在挂载的钩子中调度该操作:
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
};
}
}
推荐阅读
- qemu - 对模拟代码中字节序的重要性感到非常困惑
- azure - Azure 服务总线消息计数中 -- 和 0 之间的差异
- c - (GStreamer) rtmpsink 无法正常打开?
- csv - Bash - awk 比较未按预期工作
- python - Pandas - 根据其他列因子计数更新列值
- java - Thymeleaf th:field 在表单显示中出现错误
- python - 使用代码向数据库添加信息但得到 {'object':'error', 'status': 400, 'code': 'invalid_json', 'message': 'Error parsing JSON body.'}
- javascript - 使用 php echo 作为变量时,Jquery 出现未捕获的表达式错误
- java - 将递归方法转换为迭代方法
- image-processing - Google Vision 为具有不同图像格式的相同图像提供不一致的结果