I am using Quasar 2 Vue 3. When I use idle-vue-3 with mitt in the following way:
import { createApp } from 'vue';
import IdleVue from "idle-vue-3";
import mitt from 'mitt';
import App from "../App.vue";
const app = createApp(App);
const emitter = mitt();
const idleTimeInMillis = 60000;
app.use(IdleVue, {
eventEmitter: emitter, // OR eventEmitter: emitter.emit,
store: Store,
idleTime: idleTimeInMillis,
startAtIdle: false
});
export default app;
I get i.$emit is not a function on the console. Any advice and insight is appreciated.
Remove eventEmitter: emitter,. It is not needed.
Related
I want to use third party library element-plus in my component. In setup defineComponent entends that component. In console, it would warn Failed to resolve component: el-radio at <App>
In about router, Here is the about.vue
<template>
<div id="popup-content"></div>
</template>
<script>
import {
onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '#/components/Test.vue';
export default {
setup() {
onMounted(() => {
const myNewComponent = defineComponent({
extends: Test,
});
createApp(myNewComponent).mount('#popup-content');
nextTick(() => {
createApp(myNewComponent).mount('#popup-content');
});
});
},
}
Test component has used element-plus el-raido component, Test.vue
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data() {
return {
radio: '1',
};
},
};
</script>
I have add element-plus, and register all in main.js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
I have found this question
Extend vue.js component from third-party library
I really really don't understand what are you trying to achieve by extending your perfectly fine Test component BUT...
Vue 3 is very different from Vue 2 - a lot of global API's (as component registration for example) are not global anymore but are tight to a "app instance" (created by createApp)
So even if you register Element components in main.js (app.use(ElementPlus);), the another app instance (why!?) created in onMounted hook of about.vue component knows nothing about the components! That is the reason for an error...
You must register components in every app instance created by createApp you want to use them in ....
As #Michal Levý answered, I need to register components in every app instance created by createApp.
Here is the working version about.vue, in case someone need.
<template>
<div id="popup-content"></div>
</template>
<script>
import {
onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '#/components/Test.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
export default {
setup() {
onMounted(() => {
const myNewComponent = defineComponent({
extends: Test,
});
const app1 = createApp(myNewComponent);
nextTick(() => {
app1.use(ElementPlus);
app1.mount('#popup-content');
});
});
},
}
I'm new to redux here I'm displaying post I'm not understanding whats is going on I read few posts but can't resolve the error
But then I get the error as
Error: Actions must be plain objects. Use custom middleware for async actions.
Following is action reducer and store code please lemme know where I'm going wrong
actionPost.js
import {FETCH_POST} from '../constants/action-types';
import Axios from 'axios';
export const fetchPost=(post)=>{
return{
type:FETCH_POST,
payload:post
}
}
export const fetchAllPost=()=>{
return (dispatch)=>{
return Axios.get("https://jsonplaceholder.typicode.com/photos")
.then(response=>{
dispatch(fetchPost(response.data))
})
.catch(error=>{
throw(error)
});
};
}
Post.js
import React, { Component } from 'react';
import { fetchAllPost } from './Redux/actions/actionPost';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
const mapDispatchToProps=dispatch=>{
return{
fetchAllPost:()=>dispatch(fetchAllPost())
}
}
class NewPostC extends Component{
componentDidMount(){
this.props.fetchAllPost(); **// is this correct?**
}
render(){
return(
<div>
//display post here
</div>
)
}
}
const dispPost=connect(null,mapDispatchToProps)(NewPostC);
export default withRouter(dispPost);
Reducers.js
import { LOG_IN,FETCH_POST } from '../constants/action-types';
const initialState={
userDetails:''
};
const rootReducers=(state=initialState,action)=>{
switch(action.type){
case LOG_IN:
console.log("apayload",action.payload)
return state;
case FETCH_POST:
return action.posts;
default:
return state;
}
};
export default rootReducers;
store.js
import { createStore } from "redux";
import rootReducers from "../reducers/Loginreducers";
const store=createStore(rootReducers);
export default store;
Can anyone please help me as I'm stuck since 2 days I wanna understand whats happening and where I'm going.
Please lemme know where I'm going wrong.
Updated code only the changes I made in those files
dispPost.js
const mapDispatchToProps=()=>{
return{
fetchAllPost ////////////**A**
}
}
const mapStateToProps=state=>{
console.log("state",state)
return{
posts:state
}
}
//code here
const NewPost=connect(mapStateToProps,mapDispatchToProps)(NewPostC);
reducers
case FETCH_POST:
console.log("apayload---",action.posts)
return action.posts;
store.js
]
When I added the thunk and applymiddleware the error vanished
import rootReducers from "../reducers/Loginreducers";
import { fetchAllPost } from "../actions/actionNewPost";
import { createStore , applyMiddleware } from "redux";
import thunk from "redux-thunk";
const store=createStore(rootReducers,applyMiddleware(thunk)); **B**//
store.dispatch(fetchAllPost()); //**C**
export default store;
Can anyone please explain how A ,B, C work Its seems to me some magic Please lemme know
New Updated
store.js
import rootReducers from "../reducers/Loginreducers";
import { createStore , applyMiddleware } from "redux";
import thunk from "redux-thunk";
const store=createStore(rootReducers,applyMiddleware(thunk));
export default store;
disppost.js
const mapDispatchToProps=dispatch=>{
return{
//just fetchAllPost doesnt work if its not dispatch at store or here
fetchAllPost:()=>dispatch(fetchAllPost())
}
}
Post.js
import React, { Component } from 'react';
import { fetchAllPost } from './Redux/actions/actionPost';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
const mapDispatchToProps=dispatch=>{
return{
fetchAllPost // **remove the function declaration, you already did it **
}
}
class NewPostC extends Component{
componentDidMount(){
this.props.fetchAllPost();
}
render(){
return(
<div>
//display post here
</div>
)
}
}
const dispPost=connect(null,mapDispatchToProps)(NewPostC);
export default withRouter(dispPost);
I would say that would be a good idea to check your store.js, I'm assuming you're using redux thunk. Below some links related to your issue:
https://github.com/reduxjs/redux-thunk/issues/166
https://github.com/reduxjs/redux-thunk/issues/146
I hope it helps
I'm trying to use mobx-rest with mobx-rest-axios-adapter and mobx-react, and I have trouble making the component rerender upon async data retrieval.
Here's my data model, in state/user.js:
import { Model } from 'mobx-rest';
class User extends Model {
url() {
return '/me';
}
}
export default new User();
This is the React component, in App.js:
import React from 'react';
import { inject, observer } from 'mobx-react';
import { apiClient } from 'mobx-rest';
import createAdapter from 'mobx-rest-axios-adapter';
import axios from 'axios';
import { compose, lifecycle, withProps } from 'recompose';
const accessToken = '...';
const API_URL = '...';
const App = ({ user }) => (
<div>
<strong>email:</strong>
{user.has('email') && user.get('email')}
</div>
);
const withInitialise = lifecycle({
async componentDidMount() {
const { user } = this.props;
const axiosAdapter = createAdapter(axios);
apiClient(axiosAdapter, {
apiPath: API_URL,
commonOptions: {
headers: {
Authorization: `Bearer ${accessToken}`,
},
},
});
await user.fetch();
console.log('email', user.get('email'));
},
});
export default compose(
inject('user'),
observer,
withInitialise,
)(App);
It uses recompose to get the user asynchronously from an API in componentDidMount(), and once available the component is supposed to show the user email. componentDidMount() prints the email once available.
Finally this is index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router';
import App from './App';
import { user } from './state/user';
const documentElement = document.getElementById('ReactApp');
if (!documentElement) {
throw Error('React document element not found');
}
const browserHistory = createBrowserHistory();
const routingStore = new RouterStore();
const stores = { user };
const history = syncHistoryWithStore(browserHistory, routingStore);
ReactDOM.render(
<Provider {...stores}>
<Router history={history}>
<App />
</Router>
</Provider>,
documentElement,
);
My problem is that the component doesn't rerender once the user is retrieved and the email is available, although the console log shows that it is returned ok in the async request. I've tried playing around with mobx-react's computed, but no luck. Any ideas?
I think it will work if you change your compose order of App.js:
export default compose(
inject('user'),
withInitialise,
observer,
)(App);
According to the MobX official document,
Tip: when observer needs to be combined with other decorators or
higher-order-components, make sure that observer is the innermost
(first applied) decorator; otherwise it might do nothing at all.
when i tried user store in my test
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import chai from 'chai';
import App from '../layouts/App';
import store from '../redux/configureStore';
const expect = chai.expect;
// let store;
let app;
describe('login', () => {
beforeEach(() => {
app = mount (
<Provider store={store}>
<App />
</Provider>
)
})
but i got No reducer provided for key "dashboard"
here is my configStore main code
const reducer = {
dashboard,
PageLogin,
};
const store = createStore(
reducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
I got PageLogin, but can't got dashboard
and there is dashboard main code
export {
snackbarActions,
dialogActions,
userConfigActions,
authActions,
progressActions,
UserProfileActions,
// ...
};
You need to use combineReducers to combine your reducers
import { combineReducers } from 'redux'
const reducer = combineReducers({
dashboard,
PageLogin,
})
This Meteor React client code produces browser console error:
ReferenceError: CarsCol is not defined
Any idea why? Thanks
//cars.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { composeWithTracker } from 'react-komposer';
import { ListItems } from '../containers/myList.jsx';
const composer = (props, onData) => {
const sub = Meteor.subscribe('carsCol');
if (sub.ready()) {
const cars = CarsCol.find().fetch(); //<------- error line
onData(null, {cars});
}
};
const Container = composeWithTracker(composer) (ListItems);
ReactDOM.render(<Container />, document.getElementById('react-root'));
//publications.js
const CarsCol = new Mongo.Collection('carsCol');
Meteor.publish('carsCol', function(){
return CarsCol.find();
});
You've defined the collection on the server only, you want to define the collection in both places.
What I would do is define your collection in a separate file and import that.
/api/collections/CarsCol
const CarsCol = new Mongo.Collection('carsCol');
Then in cars.jsx
import CarsCol from '../api/collections/CarsCol'