我试图更好地理解Vuex中的"上下文"对象是什么.
所述上下文对象在Vuex文档中提及无数次.例如,在https://vuex.vuejs.org/en/actions.html中,我们有:
操作处理程序接收一个上下文对象,该对象在商店实例上公开同一组方法/属性,因此您可以调用context.commit来提交变异...
我理解如何使用它,并且我们可以使用解构,如果我们只想使用来自上下文对象的"提交",但希望更深入一点,这样我就能更好地理解发生了什么.
首先,我在"上下文对象"上发现了一对~8.5岁的帖子作为模式: 什么是上下文对象设计模式？并且 你能解释一下背景下设计模式？
但是,特别是Vuex,我希望更好地理解:
谢谢!
你如何进入rootState吸气剂？
const getters = {
getParams: rootState => {
return rootState.route.params
},
}
以上不起作用.这是怎么做到的？
我有一个我想要应用于json对象的过滤器列表.
我的突变看起来像这样:
const mutations = {
setStars(state, payload) {
state.stars = payload;
this.dispatch('filter');
},
setReviews(state, payload) {
state.reviews = payload;
this.dispatch('filter');
}
};
由于过滤器如何工作,我需要再次重新应用它们,因为我不能简单地保持向下过滤列表,因为当用户取消选择过滤器选项时,这会让我遇到麻烦.
因此,当对星星过滤器或评论过滤器(用户正在过滤)进行变异时,我需要调用运行所有过滤器的函数.
这里最简单的选择是什么？我可以添加某种帮助函数,还是可以设置一个调用实际过滤结果的突变的动作？
我不明白为什么我会收到此错误。我试图在组合函数中使用 Vuex 存储，但它不断向我抛出有关注入的错误（我什至没有使用注入）。我的应用程序对后端进行等待 api 调用，如果出现错误，则调用我的组合函数。
[Vue warn]: inject() can only be used inside setup() or functional components.
inject @ runtime-dom.esm-bundler-9db29fbd.js:6611
useStore @ vuex.esm-bundler.js:13
useErrorHandling @ useErrorHandling.js:5
checkUserExists @ auth.js:53
这是我的合成函数
import { useStore } from 'vuex'
function useErrorHandling()
{
const store = useStore() // <-- this line
function showError(errorMessage) {
console.log(errorMessage)
}
return { showError }
}
export default useErrorHandling
如果我删除这一行，那么它就不会抛出该错误
// const store = useStore() // <-- this line
更新：这就是函数的调用方式。
/**
* Check if a user exists in database …想象一下这个简单的案例.您有一个Vue JS应用程序,用户可以在其中创建任务列表并对其进行排序.这些列表应由服务器存储在数据库中.让我们假设我们拥有ListComponent大部分用户体验.
我的问题是,我应该使用哪种模式来处理前端和后端数据同步？
A)浏览vuex:将活动列表(显示,编辑或创建的列表)存储在vuex中store.在ListComponent将改变store,并随后,在列表中所做的更改将通过API发送到后端.
B)直接转到服务器:ListComponent每次显示,编辑或创建列表时,直接从服务器读取和写入.
如果遵循A,商店应该采用哪种架构？我应该如何以及何时进行同步？如何跟踪已更改的内容和未更改的内容？
有人知道如何在函数中使用mapState或mapGetters使用吗？我知道可以使用带有钩子的商店但是使用这个钩子我们导入所有商店，或者我们可以指定一个：Vue 3setupuseStoremapStatemapGettersmodule
// ...
computed: {
...mapGetters('myModule', [
'myStateVariable'
]
)
//...
我想通过分配setter方法mapState.我目前使用一种解决方法,我将我感兴趣的变量命名为(todo)作为临时名称(storetodo),然后在另一个计算变量中引用它todo.
methods: {
...mapMutations([
'clearTodo',
'updateTodo'
])
},
computed: {
...mapState({
storetodo: state => state.todos.todo
}),
todo: {
get () { return this.storetodo},
set (value) { this.updateTodo(value) }
}
}
我想跳过额外的步骤并直接在其中定义getter,setter mapState.
我为什么要这样做？
正常的方法是使用mapMutations/ mapActions&mapState/ mapGetters
没有我上面说明的计算的get/set组合,并直接在HTML中引用变异:
<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' />
getter/setter版本允许我简单地写:
<input v-model='todo' />
在vue.js app中,使用vuex作为状态管理存储,我只需要在vuex中更改属性的值.为此我可以遵循两种方法:
调度一个action方法,该方法将进一步提交mutation,最终将改变状态.
第二种方法是mutation直接从组件提交,然后变异方法将改变状态.
目前,我正在使用这样的第一种方法:
在组件中:
this.$store.dispatch('updateNotice', 'This is some notice')
在行动中:
updateNotice ({state, getters, commit}, payload) {
commit('UPDATE_NOTICE', payload)
}
在突变中:
UPDATE_NOTICE (state, payload) {
state.notice = payload
}
您可能已经注意到,我使用该action方法只是提交单个突变,没有任何其他逻辑或异步功能.
我的问题是,在这种情况下,我是否应该直接从组件本身提交变异？什么是最佳做法？由于action在这个简单的情况下使用方法似乎很冗长,并没有特定的目的.
是否有任何理由我应该始终commit从组件中采取行动？毕竟,在vuex中...mapMutations()有一些理由存在.
我想通过在 Vue 组件中观察 Vuex 状态值来检测它的变化。我目前正在使用 Vue 3 和组合 API。我尝试过以下方法：
setup(props) {
const store = useStore();
watch(store.getters.myvalue, function() {
console.log('value changes detected');
});
return {
myvalue: computed(() => store.getters.myvalue)
}
},
但改变console.log()时不会被调用。myvalue
我在我的组件中使用vuex和mapGetters帮助.我有这个功能:
getProductGroup(productIndex) {
return this.$store.getters['products/findProductGroup'](productIndex)
}
有可能以某种方式移动它mapGetters吗？问题是我也将一个参数传递给函数,所以我找不到将它放入的方法mapGetters