I'm struggling to integrate vue-instantsearch with Vuex store in Vue SSR app.
I've tried to follow https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/ssr however this example is using only context.store and I'm trying to adapt it to use with Vuex store
My integration is following:
<template>
<div class="vwp-single">
<ais-index :searchStore="searchStore" :auto-search="false">
<ais-search-box placeholder="Find products"/>
<ais-refinement-list attribute-name="colors"></ais-refinement-list>
<ais-results>
<template scope="{ result }">
<div>
<ais-highlight :result="result" attribute-name="name"></ais-highlight>
</div>
</template>
</ais-results>
</ais-index>
<div class="clearfix"></div>
</div>
</template>
<script>
import {
createFromAlgoliaCredentials,
createFromSerialized,
FACET_OR
} from 'vue-instantsearch'
import { mapGetters } from 'vuex'
const fetchInitialData = (store, route) => {
let store1
store1 = createFromAlgoliaCredentials(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
)
store1.indexName = 'ikea'
store1.query = route.params.query ? route.params.query : ''
store1.addFacet('colors', FACET_OR)
store1.highlightPreTag = '<mark>'
store1.highlightPostTag = '</mark>'
store1.start()
store1.refresh()
return store1.waitUntilInSync().then(() => {
store.dispatch(`pt/searchStore`, store1.serialize())
})
}
export default {
computed: {
...mapGetters('pt', ['searchStore'])
},
prefetch: fetchInitialData,
beforeMount () {
if (!window.__INITIAL_STATE__) {
throw new Error('Not state was found.')
}
this.searchStore = createFromSerialized(
window.__INITIAL_STATE__.pt.searchStore
)
},
methods: {
loadResults () {
fetchInitialData(this.$store, this.$route)
}
},
created () {
this.loadResults()
},
watch: {
'$route' () {
this.searchStore.query = this.$route.params.query
? this.$route.params.query
: ''
},
'searchStore.query' (to) {
if (to.length === 0) {
this.$router.push({ name: 'map' })
} else {
this.$router.push({ name: 'mapSearch', params: { query: to } })
}
}
}
}
</script>
if I remove ais-index and just render out {{ searchStore }} I can see data returned, but if I try to mount it on ais-index component, it fails with following errors:
[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'helper' of undefined"
found in
---> <PageMap> at src/theme/PageMap.vue
<Root>
warn # vue.runtime.esm.js:587
vue.runtime.esm.js:587 [Vue warn]: Error in nextTick: "AlgoliaSearchError: Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)"
warn # vue.runtime.esm.js:587
vue.runtime.esm.js:1737 AlgoliaSearchError {name: "AlgoliaSearchError", message: "Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)", stack: "AlgoliaSearchError: Please provide an application …ttp://localhost:3100/assets/js/vendor.js:6674:45)"}
Would much appreciate if someone could point me in right direction how to debug this or show example code how to integrate vue-instantsearch with Vuex and SSR
Related
I am new to Vue and stuck. I am trying to send user input data from a form into a vuex store. From that vuex store, an action will be called (fetching from API) and I would like that data back into my app and components.
<template>
<div>
<h1>APP NAME</h1>
<form action="submit" #submit.prevent="sendCityName()">
<label for="query"></label>
<input
type="text"
id="query"
v-model="cityName"
>
<button type="submit">Submit</button>
</form>
<h3>{{ lat }}</h3>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
cityName: ''
}
},
computed: {
coordinates () {
return this.$store.state.lat
}
},
methods: {
sendCityName() {
this.$store.commit('fetchCity', this.cityName)
}
},
}
</script>
Here is my index.vue and getting the error "Cannot read properties of undefined (reading 'commit')"
here is my store.js. I want to use the lat and lon across my app.
export const state = () => ({
lat: '',
lon: ''
})
export const mutations = {
SET_LAT(state, payload){
state.lat = payload
},
SET_LON(state, payload){
state.lon = payload
}
}
export const actions = {
async fetchCity({ commit }, cityName) {
// make request
axios.get(
`https://api.openweathermap.org/geo/1.0/direct`, {
params: {
appid: "xxxxxxx",
q: cityName,
}
}).then((response) => {
commit('SET_LAT', response.data[0].lat);
commit('SET_LON', response.data[0].lng);
});
},
};
When I button submit I get the error "Cannot read properties of undefined (reading 'commit')"
Here is my working repo with the fixes mentioned below.
There are 3 things in your code:
remove vuex from package.json and run yarn again, that one is already baked into Nuxt as stated in the official documentation, those are the only steps needed
all the files inside of store will be namespaced by default for you, since you do have store/store.js, the proper syntax will be
async sendCityName() {
await this.$store.dispatch('store/fetchCity', this.cityName) // 👈🏻 store prefix
}
since you do use the axios module, you should have the following in your action (using the async/await syntax since it's more modern and preferable)
async fetchCity({ commit }, cityName) {
const response = await this.$axios.get(
`https://api.openweathermap.org/geo/1.0/direct`, {
params: {
appid: "3d91ba5b3c11d13158a2726aab902a0b",
q: cityName,
}
})
commit('SET_LAT', response.data[0].lat)
commit('SET_LON', response.data[0].lng)
}
Looking at the browser's console, you also have some errors to fix.
I can also recommend an ESlint + Prettier configuration so that you keep your code error-proof + properly formatted at all times.
I have typical scenario where I call REST API in vuex actions to fetch some data and then I commit that to mutation.
I use async/await syntax and try/catch/finally blocks. My vuex module looks something like this:
const state = {
users: null,
isProcessing: false,
operationError: null
}
const mutations = {
setOperationError (state, value) {
state.operationError = value
},
setIsProcessing (state, value) {
state.isProcessing = value
if (value) {
state.operationError = ''
}
},
setUsers(state, value) {
state.users= value
}
}
const actions = {
async fetchUsers ({ commit }) {
try {
commit('setIsProcessing', true)
const response = await api.fetchUsers()
commit('setUsers', response.result)
} catch (err) {
commit('setUsers', null)
commit('setOperationError', err.message)
} finally {
commit('setIsProcessing', false)
}
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
Notice that I handle catch(err) { } in vuex action and don’t rethrow that error. I just save error message in the state and then bind it in vue component to show it if operationError is truthy. This way I want to keep vue component clean from error handling code, like try/catch.
I am wondering is this right pattern to use? Is there a better way to handle this common scenario? Should I rethrow error in vuex action and let it propagate to the component?
What I usually do, is have a wrapper around the data being posted, that handles the api requests and stores errors. This way your users object can have the errors recorded on itself and you can use them in the components if any of them are present.
For example:
import { fetchUsers } from '#\Common\api'
import Form from '#\Utils\Form'
const state = {
isProcessing: false,
form: new Form({
users: null
})
}
const mutations = {
setIsProcessing(state, value) {
state.isProcessing = value
},
updateForm(state, [field, value]) {
state.form[field] = value
}
}
const actions = {
async fetchUsers ({ state: { form }, commit }) {
let users = null
commit('setIsProcessing', true)
try {
users = await form.get(fetchUsers);
} catch (err) {
// - handle error
}
commit('updateForm', ['users', users])
commit('setIsProcessing', false)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
Then in the component you can use the errors object on the wrapper like so:
<template>
<div>
<div class="error" v-if="form.erros.has('users')">
{{ form.errors.get('users') }}
</div>
<ul v-if="users">
<li v-for="user in users" :key="user.id">{{ user.username }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('module' ['form']),
users () {
return this.form.users
}
}
</script>
This is just my personal approach that I find very handy and it served me well up to now. Don't know if there are any standard patterns or if there is an explicit "correct way" to do this.
I like the wrapper approach, because then your errors become automatically reactive when a response from api returns an error.
You can re-use it outside vuex or even take it further and inject the errors into pre-defined error boundaries which act as wrapper components and use the provide/inject methods to propagate error data down the component tree and display them where ever you need them to show up.
Here's an example of error boundary component:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
module: {
type: String,
required: true,
validator: function (value) {
return ['module1', 'module2'].indexOf(value) !== -1
}
},
form: {
type: String,
default: 'form'
}
},
provide () {
return {
errors: this.$store.state[this.module][this.form].errors
}
}
}
</script>
Wrap some part of the application that should receive the errors:
<template>
<div id="app">
<error-boundary :module="module1">
<router-view/>
</error-boundary>
</div>
</template>
Then you can use the errors from the users wrapper in child components like so:
If you have a global error like no response from api and want to display it in the i.e.: sidebar
<template>
<div id="sidebar">
<div v-if="errors.has('global')" class="error">
{{ errors.get('global').first() }}
</div>
...
</div>
</template>
<script>
export default {
inject: [
'errors'
],
...
}
</script>
And the same error object re-used somewhere inside a widget for an error on the users object validation:
<template>
<div id="user-list">
<div v-if="errors.has('users')" class="error">
{{ errors.get('users').first() }}
</div>
...
</div>
</template>
<script>
export default {
inject: [
'errors'
],
...
}
</script>
Jeffrey Way did a series on Vue2 a while ago and he proposed something similar. Here's a suggestion on the Form and Error objects that you can build upon: https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js
Using Vue TreeSelect Plugin to load a nested list of nodes from firebase backend. It's doc page says,
It's also possible to have root level options to be delayed loaded. If no options have been initially registered (options: null), vue-treeselect will attempt to load root options by calling loadOptions({ action, callback, instanceId }).
loadOptions (in my App.vue) dispatch vuex action_FolderNodesList, fetches (from firebase) formats (as required by vue-treeselect), and mutates the state folder_NodesList, then tries to update options this.options = this.get_FolderNodesList but this does not seems to work.
Here is the loadOptions method (in app.vue)
loadOptions() {
let getFolderListPromise = this.$store.dispatch("action_FolderNodesList");
getFolderListPromise.then(_ => {
this.options = this.get_FolderNodesList;
});
}
Vue errors out with Invalid prop: type check failed for prop "options". Expected Array, got String with value ""
I am not sure what am I doing wrong, why that does not work. A working Codesandbox demo
Source
App.vue
<template>
<div class="section">
<div class="columns">
<div class="column is-7">
<div class="field">
<Treeselect
:multiple="true"
:options="options"
:load-options="loadOptions"
:auto-load-root-options="false"
placeholder="Select your favourite(s)..."
v-model="value" />
<pre>{{ get_FolderNodesList }}</pre>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Treeselect from "#riophae/vue-treeselect";
import "#riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
data() {
return {
value: null,
options: null,
called: false
};
},
components: {
Treeselect
},
computed: mapGetters(["get_FolderNodesList"]),
methods: {
loadOptions() {
let getFolderListPromise = this.$store.dispatch("action_FolderNodesList");
getFolderListPromise.then(_ => {
this.options = this.get_FolderNodesList;
});
}
}
};
</script>
Store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
folder_NodesList: ""
},
getters: {
get_FolderNodesList(state) {
return state.folder_NodesList;
}
},
mutations: {
mutate_FolderNodesList(state, payload) {
state.folder_NodesList = payload;
}
},
actions: {
action_FolderNodesList({ commit }) {
fmRef.once("value", snap => {
var testObj = snap.val();
var result = Object.keys(testObj).reduce((acc, cur) => {
acc.push({
id: cur,
label: cur,
children: recurseList(testObj[cur])
});
return acc;
}, []);
commit("mutate_FolderNodesList", result);
});
}
}
});
Any help is appreciated.
Thanks
It seems you are calling this.options which would update the entire element while only the current expanding option should be updated.
It seems loadOptions() is called with some arguments that you can use to update only the current childnode. The first argument seems to contain all the required assets so I wrote my loadTreeOptions function like this:
loadTreeOptions(node) {
// On initial load, I set the 'children' to NULL for nodes to contain children
// but inserted an 'action' string with an URL to retrieve the children
axios.get(node.parentNode.action).then(response => {
// Update current node's children
node.parentNode.children = response.data.children;
// notify tree to update structure
node.callback();
}).catch(
errors => this.onFail(errors.response.data)
);
},
Then I set :load-options="loadTreeOptions" on the <vue-treeselect> element on the page. Maybe you were only missing the callback() call which updates the structure. My installation seems simpler than yours but it works properly now.
I am rendering a custom component list (this is just an example) as below:
<template>
<ul>
<li
v-for="(item, index) in componentList"
:field-name="MyFieldName"
>
<custom_component :index="index"
:some-prop="item.someProps" />
></li>
</ul>
</template>
<script>
export default {
name: 'myListComp';
props: {
},
... other props
},
data () {
return {
/// ... some other variable/properties for this instance
myFieldName: '',
componentList: []
}
},
created () {
// ...
Load data from props
this.myFieldName = this.fieldName;
// Initialize Component List with the data
this.componentList = this.initializeComponentList();
// ...
},
methods:{
initializeComponentList() {
// Get the list from AJAX
return [{}, {}, ....];
}
}
}
</script>
I am getting some weird error as below while rendering the component list.
On a side note ... I am using the latest laravel-mix ^2.1.11 for compiling the vue components. I am using Vue ^2.5.16 and vuex ^3.0.1.
I am trying to use a plugin from GodofBrowser, as stated but I am getting an error
this.$dialog.confirm('Please confirm to continue')
Uncaught TypeError: Cannot read property 'confirm' of undefined
so this.$plugin is undefined .... why ?
// I installed it via npm
npm install vuejs-dialog
main.js
// I imported it
import Vue from "vue"
import VuejsDialog from "vuejs-dialog"
// and I told Vue to install it
Vue.use(VuejsDialog)
Then I am trying to use it in my App.vue, on 'click' method :
App.vue
<template>
<div id="app" class="container">
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
<li id="shoppinglists" v-if="!logged">
<span #click.capture="clicked">
<router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link>
</span>
</li>
<li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
import store from '#/vuex/store'
import { mapGetters } from 'vuex'
export default {
name: 'app',
methods: {
clicked: (event) => {
event.preventDefault()
console.log('clicked!'). // got it in console
this.$dialog.confirm('Please confirm to continue') // !ERROR
.then(function () {
console.log('Clicked on proceed')
})
.catch(function () {
console.log('Clicked on cancel')
})
}
},
computed: {
...mapGetters({ currentUserId: 'getCurrentUserId', logged: 'getLogged' })
},
store
}
</script>
This is a common stumbling block with Vue applications -
you can find the following in the official Vue documentation:
Don’t use arrow functions on an options property or callback, such as
created: () => console.log(this.a) or vm.$watch('a', newValue =>
this.myMethod()).
Since arrow functions are bound to the parent
context, this will not be the Vue instance as you’d expect, often
resulting in errors such as Uncaught TypeError: Cannot read property
of undefined or Uncaught TypeError: this.myMethod is not a function.
Try using a normal function instead:
methods: {
clicked: function (event) {
event.preventDefault()
console.log('clicked!'). // got it in console
this.$dialog.confirm('Please confirm to continue') // !ERROR
.then(function () {
console.log('Clicked on proceed')
})
.catch(function () {
console.log('Clicked on cancel')
})
}
}
Should use : Vue.prototype , not this !
Vue.prototype.$dialog.confirm('Please confirm to continue')