I've read a lot of posts here and none of them worked for me. I have a very basic VueJS app but I have an error when I write something in my first component. Here's my code :
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
item: ''
},
mutations: {
change(state, item) {
state.item = item
}
},
actions: {
change({ commit }, newValue) {
commit('change', newValue);
}
},
getters: {
item: item => state.item
}
})
App.vue
<template>
<div id="app">
<AddItem/>
<DisplayItem/>
</div>
</template>
<script>
import AddItem from './components/AddItemComponent'
import DisplayItem from './components/DisplayItemComponent'
export default {
name: 'App',
components: {
AddItem,
DisplayItem
}
}
</script>
AddItemComponent.vue
<template>
<div>
<label for="item">Nom de l'objet</label><br/>
<input type="text" name="item" #input="changed">
</div>
</template>
<script>
export default {
methods: {
changed: function (event) {
this.$store.dispatch('change', event.target.value)
}
}
}
</script>
DisplayItemComponent.vue
<template>
<div>
<p>Nom de l'objet : {{ $store.getters.item }}</p>
</div>
</template>
...and finally my error
As I said, I tried a lot of things but none of them worked... Maybe I forget something ?
Thanks in advance for your help.
You need to dispatch to an action, then in the action, commit the value which will run your mutation. Also your state should be an object and not a function.
Here is a basic example:
export const store = new Vuex.Store({
state: {
item: ''
},
mutations: {
change(state, item) {
state.item = item
}
},
actions: {
change({ commit }, modifiedValue) {
// do some stuff
commit('change', modifiedValue)
}
},
getters: {
item: item => state.item
}
})
You should then be able to run your dispatch now:
this.$store.dispatch('change', event.target.value)
Finally I found my problem... I was importing the wrong store. Here's my final code and it's working !
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Thanks for any help !
Related
I'm following this tutorial about Vuex Pagination (https://whatthecode.dev/easy-vuejs-vuex-pagination/?utm_source=rss&utm_medium=rss&utm_campaign=easy-vuejs-vuex-pagination)
The only difference is that I changed my API request, however I can retrieve frontend data from state, but can't trigger action. I'm new to VueX, can someone spot the mistake?
PS: It never reaches console.log("Let's get")
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import volumes, { VOLUMES_MODULE } from './volumes';
Vue.use(Vuex);
const store = new Vuex.Store ({
modules: {
[VOLUMES_MODULE]: volumes,
},
});
export default store;
volumes/index.js
import state from './state';
import actions from './actions';
export const VOLUMES_MODULE = 'volumes'
export default {
namespaced: true,
actions,
state,
}
export * from './state'
volumes/actions.js
import VolumeService from '../../services/VolumeService';
import {
SET_DATA,
SET_PAGINATION,
} from './mutations'
import state from './state';
export const FETCH_VOLUMES = 'load_volumes'
const volumeService = new VolumeService();
export default {
async [FETCH_VOLUMES]({ commit }, payload) {
console.log("Let Get");
const volumes = await volumeService.getTwentyVolumes({
...state.pagination,
...payload,
})
commit(SET_DATA, volumes.data)
commit(SET_PAGINATION, {
page: 2,
limit: 20,
totalPages: 2,
})
},
}
volumes/mutations.js
export const SET_PAGINATION = 'set_pagination'
export const SET_DATA = 'set_data'
export default {
[SET_PAGINATION](state, pagination) {
state.pagination = pagination
},
[SET_DATA](state, data) {
state.data = data
},
}
volumes/state.js
export const VOLUMES = 'data'
export const PAGINATION = 'pagination'
export default {
[VOLUMES]: [],
[PAGINATION]: {
page: 1,
limit: 20,
totalPages: 1,
},
}
First check if you have installed store to your view, normally in the main.js where you new a Vue instance, code should be like this:
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App)
}).$mount("#app");
Then in the component where you want to call the load_volumes, use mapActions to add this function. code sample:
<script>
import {mapActions} from 'vuex'
export default {
name: "App",
components: {
},
methods: {
...mapActions({load_volumes: 'volumes/load_volumes'})
},
mounted(){
this.load_volumes()
}
}
</script>
working example can be found here:
https://codesandbox.io/s/call-vuex-actions-in-components-msdyo
In one of our project i try to use vuejs-countdown-timer component, but i get this error
Unknown custom element: - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
in this package documentation we have:
//Installation
npm i vuejs-countdown-timer -S Import component
// global register at main.js import VueCountdownTimer from
'vuejs-countdown-timer';
Vue.use(VueCountdownTimer);
and basic usage of that:
<template>
<vue-countdown-timer
#start_callback="startCallBack('event started')"
#end_callback="endCallBack('event ended')"
:start-time="'2018-10-10 00:00:00'"
:end-time="1481450115"
:interval="1000"
:start-label="'Until start:'"
:end-label="'Until end:'"
label-position="begin"
:end-text="'Event ended!'"
:day-txt="'days'"
:hour-txt="'hours'"
:minutes-txt="'minutes'"
:seconds-txt="'seconds'">
</vue-countdown-timer>
</template>
<script >
export default {
name: 'Timer',
methods: {
startCallBack: function(x) {
console.log(x);
},
endCallBack: function(x) {
console.log(x);
},
},
};
</script>
now after installing the package i imported into my app.js:
import Vue from 'vue'
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default
import Timer from './components/partials/timer.vue'
new Vue({
store,
components: {
Timer,
//
}, computed: {}, mount: {}
}).$mount('#app')
and after that i try to use into html template as:
<login inline-template>
<div class="page-content">
<div class="content-wrapper">
...
</div>
<Timer></Timer>
</div>
</login>
my login.js content:
import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
export default {
data() {
return {
//
}
}
}
Register vue-countdown-timer globally in app.js and your custom component timer locally in login.js
app.js
import Vue from 'vue'
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default
new Vue({
store,
computed: {}, mount: {}
}).$mount('#app')
Login.js
import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
import Timer from '../partials/timer.vue'
export default {
data() {
return {
//
}
},
components: {
Timer
},
}
I am getting a '[vuex] unknown action type: RawHTML' when trying to dispatch an action on a component.
Those errors are usually caused by not correctly namespaced modules, but I am not using modules here.
store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const SETRAWHTML = ''
const store = new Vuex.Store({
state: {
raw:''
},
mutations: {
[SETRAWHTML](state,str){
state.raw=str
},
},
actions: {
RawHtml({commit}, str) {
commit(SETRAWHTML, str)
},
},
getters: {
getRawHTML (state) {
return state.raw
}
},
})
export default store;
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
my component
click(){
store.dispatch('RawHTML', this.rawHTML)
}
Thanks in advance
The name of actions is case-sensitive and you should dispatch the action with the same name as it's defined in the store, RawHTML and RawHtml don't refer to the same action, so you should respect the case and write the action dispatch as follows :
click(){
store.dispatch('RawHtml', this.rawHTML)
}
I tried to create a first simple App but I have a problem with store.
I have in mainJS
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
Vue.use(Vuex);
import {store} from './Store.js';
store.commit('increment')
new Vue({
el: '#app',
router,
store,
template: '<div><App></App></div>',
components: { App }
});
So in my store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
So I would create a child component of App Component that use a event increment, so I have created a Component Counter
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$.store.state.count
}
}
}
</script>
And I call this component from my App component that it is:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Counter></Counter>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'app',
components:{
Counter
}
}
</script>
But I have this error in my Counter component:
[Vue warn]: Error in render: "TypeError: Cannot read property 'store'
of undefined"
found in
---> at src\components\Counter.vue
at src\App.vue
You only made a small mistake: It has to be $store, not $.store:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
I had the same problem and changing from Vue to vue and Vuex to vuex in all lines of .js store file I got it working.
I have defined a variable called $shopifyClient within Vue which is not accessible in Vuex. How do i make thi variable accessible?
Vue.$shopifyClient.addLineItems('1234', lineItems).then((checkout) => {
console.log(checkout.lineItems)
})
returns TypeError: Cannot read property 'addLineItems' of undefined, so i would assume it cannot retrieve $shopifyClient.
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.prototype.$shopifyClient = new Client(
new Config({
domain: 'some-page.myshopify.com',
storefrontAccessToken: '123456'
})
)
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
lineItems: { }
},
actions: {
addToCart ({ commit, state }) {
var lineItems = [{variantId: '12345==', quantity: 2}]
Vue.$shopifyClient.addLineItems('1234', lineItems).then((checkout) => {
console.log(checkout.lineItems)
})
}
}
})
You can declare $shopifyClient in Vuex store as shown below:
//Store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
lineItems: { },
$shopifyClient: new Client(
new Config({
domain: 'some-page.myshopify.com',
storefrontAccessToken: '123456'
})
)
},
actions: {
addToCart ({ commit, state }) {
var lineItems = [{variantId: '12345==', quantity: 2}]
state.$shopifyClient.addLineItems('1234', lineItems).then((checkout) => {
console.log(checkout.lineItems)
})
}
}
})
// vue component
//you can access it like below
this.$root.$store.state.$shopifyClient;