Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 中的 getter
类似于 Vue 组件中的计算属性,用于从 store 中派生出一些状态。
Getter:在 Vuex 中,getter 是 store 的计算属性。它们允许你从 store 的 state 中派生出一些值。Getter 接收 store 的 state 作为其第一个参数,并且可以接收其他 getter 作为第二个参数。
确保 state 中的初始值不是 null。
const store = new Vuex.Store({
state: {
myData: 'initial value' // 确保不是 null
},
getters: {
myGetter: state => state.myData
}
});
确保 getter 内部的逻辑正确无误。
getters: {
myGetter: state => {
// 确保这里的逻辑不会返回 null
return state.myData || 'default value';
}
}
如果 state 的值依赖于异步操作,确保在异步操作完成后更新 state。
actions: {
fetchData({ commit }) {
axios.get('/api/data')
.then(response => {
commit('updateMyData', response.data);
});
}
},
mutations: {
updateMyData(state, payload) {
state.myData = payload;
}
}
const store = new Vuex.Store({
state: {
myData: null
},
getters: {
myDataOrNull: state => state.myData,
myDataOrDefault: state => state.myData || 'default value'
},
mutations: {
setMyData(state, payload) {
state.myData = payload;
}
},
actions: {
fetchData({ commit }) {
axios.get('/api/data')
.then(response => {
commit('setMyData', response.data);
});
}
}
});
// 在组件中使用
computed: {
myData() {
return this.$store.getters.myDataOrNull;
},
myDataOrDefault() {
return this.$store.getters.myDataOrDefault;
}
}
通过以上方法,你可以确保 Vuex 的 getter 正确地返回期望的值,而不是 null。
领取专属 10元无门槛券
手把手带您无忧上云