I want to hand over variable from my component to store.
In component methods i write:
methods:{
push(){
let message = "hi"
this.$store.dispatch('test', message)
}
}
Then in index.js:
actions: {
test({dispatch},{test}){
console.log(test)
},}
And in console i have - undefined
You shouldn't destruct the dispatch payload {test} unless the message parameter has a field called test:
actions: {
test({dispatch},test){
console.log(test)
},}
Related
Little confused here...
I am trying to update a nested object in a Vuex state, which seems to work until I try to add another new value.
Here is my mutation
export const mutations = {
add(state, block) {
state.blocks.push({
type: block,
data: {},
style: {}
})
},
modify(state, [i, key, obj]) {
state.blocks[i][key] = Object.assign({}, state.blocks[i][key], obj)
},
remove(state, index) {
state.blocks.splice(index, 1)
console.log(index)
}
}
Actions:
export const actions = {
createBlock(context, type) {
context.commit('add', type);
},
updateBlock(context, payload) {
context.commit('modify', payload);
},
removeBlock(context, index) {
context.commit('remove', index)
}
}
And my dispatch of the action
this.$store.dispatch('updateBlock', [this.index, 'data', this.obj]) // works
this.$store.dispatch('updateBlock', [this.index, 'style', {m: newMargin}]) //throws error
When I update a Block with the type being data, things work, though when I try to add new data to the style object I get an error
[vuex] do not mutate vuex store state outside mutation handlers.
The end goal is to be able to add key/values to the styles object in the block. This will allow me to create dynamic class names.
What the heck am I missing? I feel like it has to do with Object.assign
I have some issue accessing data from vuex action argument within the actual action. There is probably a better way to do what I'm trying to do, but for now the only way to get the doc id in which subcollection is, is to pass it inside action argument.
Doing like this, I receive a error message : "FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined"
When I check in console for Vue data in component with Vue extension, demand.id is there :
demandId:"AE5ba0IB1aCwlYDs42ir"
So maybe I got this error because demandId is type of string? At this point I'm not sure about where to look for answers, maybe someone could direct me through possibles solutions?
Vue Component :
props: ["demand", "modalId"],
data() {
return {
meetingForm: {
demandId: this.demand.id,
status: "pending",
date: "",
time: "",
duration: null,
note: ""
}
}
},
//method:
submitModal(closeCallback) {
const meeting = {
demandId: this.meetingForm.demandId,
status: "Pending",
date: this.meetingForm.date,
time: this.meetingForm.time,
duration: this.meetingForm.duration,
note: this.meetingForm.duration
};
// Dispatch action to create Meeting in DB
this.$store
.dispatch("meetings/createMeeting", meeting)
.then(_ => {
closeCallback();
this.$toasted.success("Meeting has been succesfully created!", {
duration: 3000
});
})
.catch(e => console.error(e));
}
Vuex action :
createMeeting( meeting) {
meeting.createdate = Timestamp.fromDate(new Date())
const demandId = meeting.demandId
console.log(demandId)
return db
.collection('demands')
.doc(this.demandId)
.collection('meetings')
.add(meeting)
},
replace this.demandId with demandId
createMeeting( meeting) {
meeting.createdate = Timestamp.fromDate(new Date())
const demandId = meeting.demandId
console.log(demandId)
return db
.collection('demands')
.doc(demandId)
.collection('meetings')
.add(meeting)
},
Vuex API
actions
type: { [type: string]: Function }
Register actions on the store. The handler function receives a context object that exposes the following properties:
{
state, // same as store.state, or local state if in modules
rootState, // same as store.state, only in modules
commit, // same as store.commit
dispatch, // same as store.dispatch
getters, // same as store.getters, or local getters if in modules
rootGetters // same as store.getters, only in modules
}
And also receives a second payload argument if there is one.
The issue is that I didn't specified context.
I am using Vuex for state right now and taking advantage of getters to acquire state so that I don't have to use props. However, I am curious if I can use Vuex to replace this type of function emitting. How would that be done with Vuex, if it's even possible.
Parent
<child-component #handleselectproduct="selectProduct"></child-component>
selectProduct: function() {
axios.get()
}
Child
<button #click="selectProduct></button>
selectProduct: function() {
this.$emit('handleselectproductselection');
}
You could use vuex actions and mutations. Mutations are used for synchronous and actions for asynchronous calls. You could imagine them as setters as opposed to getters that you already use. So in your current example, you would call an action which may or may not set a state property through a mutation. you would define this action with:
const store = new Vuex.Store({
state: {
selectedProduct: {}
},
getters: {
getSelectedProduct: state => {
return state.selectedProduct
}
},
mutations: {
selectProduct(state, payload) {
state.selectedProduct = payload
}
},
actions: {
async selectProduct(context, axios) {
const { commit } = context
const product = await axios.get(...) // some call
commit('selectProduct', product)
}
}
})
After defining these, you can call the action through the this.$store.dispatch('selectProduct', axios) method in the child component and have your result available in the parent component or wherever else you may need it. And if you need some sort of notification that the property has changed (you need to do some change to the selectedProduct data and then show it), you can set a watcher function on the respective getter or just use computed properties that use the getter and they will pick up the change.
You can find out more about actions at https://vuex.vuejs.org/guide/actions.html
I´m writing a method in VueX store to upload a object converted to a json to Firebase.
In vuex store under action I have created a method called scheduleTickets(purchase) but in the methods I cant access the value in the purchase object.
But If I commit to a mutations function and send the object to it I can access them but not from actions.
Am I doing something wrong here?
async scheduleTickets(purchase){
let documents = JSON.stringify(purchase)
for(let document of documents){
console.log(document)
}
}
From the docs https://vuex.vuejs.org/guide/actions.html
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
You should have at least 2 arguments: context and second - payload. Override your method to this:
scheduleTickets(context, purchase){
let documents = JSON.stringify(purchase)
for(let document of documents){
console.log(document)
}
}
And you can dispatch it like this:
// dispatch with a payload
store.dispatch('scheduleTickets', purchase)
I am not sure when computed property (in vue lifecycle) comes. Let's say I have a method that I run in created() as:
created () {
getSomething()
}
Inside getSomething() I fetch data and fill my data property as:
getSomething(){
axios.get(...) { this.info = response.data }
}
Now, in computed properties, I do:
computed: {
doSomething () {
this.info.forEach(item => {})
}
}
But, inside my computed I get forEach is undefined, as if this.info is not an array or has not be filled.
What am I doing wrong? are computed props called before created() or something?
try something like this
getSomething(){
return axios.get(...) { this.info = response.data }
}
then you can use the promise returned in created method like this....
created () {
getSomething().then( () => {
doSomething()
}}
}
You could utilise Vuex' state management...
Vuex has :
Dispatches
Actions
Mutations
Getters
What i am thinking is, on your page load, map an action to the store that makes a call to your axios service and after it returns, commit a mutation that stores the response to the store...
then you can map the state to your component and retrieve the data.
This might not be the quickest answer but if you are expecting to need the response data from the axios request, it might be worth putting it into some sort of state management :-)