Recently I found out that composition API lifecycle hooks can be used within options API components.
For instance, I'm using beforeUnmount hook inside mounted of composition API, and the hook is called correctly.
https://codesandbox.io/s/testing-onunmounted-vue-3-2-4e8x61?file=/src/components/test1.vue
There is not much information regarding this topic yet. On the documentation page, there is a hint saying:
For shared usage of lifecycle hooks, see Guide - Lifecycle Hooks
But it leads to an incomplete page with little information regarding this subject.
So I wonder if it is acceptable using composition API lifecycle hooks this way? Am I missing something?
Related
I'm trying to write SSR-friendly code, keeping in mind a potential migration of my app from SPA to SSR. One of the principles of such code is to avoid statefull singletons which can cause cross request state pollution
The problem comes when I need to use an instance of Vuex, Vue-router, Vue-i18n etc. outside of Vue component. Because the solution in all the respective SO answers is... You guessed it. To create and export a statefull singleton in a separate js file and then import it all over the app:
Vue-router: https://stackoverflow.com/a/43562210/11208064
Vuex: https://stackoverflow.com/a/47575742/11208064
Vue-i18n: https://stackoverflow.com/a/66695008/11208064
A simple example
// store.js
export default new Vuex.Store() {} // this is a singleton
// someOtherModule.js
import { store } from './store.js'
Pinia has covered the issue in the docs. They recommend to access the pinia instance via app.$pinia. However they don't specify how do I access the app instance itself.
Also the problem is not limited to these libraries. We write our own modules which work in a similar manner.
Researching the issue I came across this article. It suggests to wipe module cache, so each time you require it all the code is executed again, making it fresh and stateless. Sounds pretty sophisticated, but maybe this is the way? And if not, what is the recommended solution?
I'm using react-navigation with react-native.
I know that I can customize how JSON.stringify serializes my class into JSON. I am doing this because some of the properties of my class are Dayjs objects from day.js which give the non-serializable warning in Expo Go.
I need to be able to handle the JSON.parse side of that. I realize that JSON.parse uses a reviver function, but is there any way that I can provide such a function to react-native when it parses my params?
I'm really not sure why react-navigate can't (or doesn't) store these objects in memory. Why the serialization?
This can happen if you are passing non-serializable values such as class instances, functions etc. in params. React Navigation warns you in this case because this can break other functionality such state persistence, deep linking, etc.
In the official documentation, they said that the params you pass are JSON-serializable. That way, you'll be able to use state persistence and your screen components will have the right contract for implementing deep linking.
You can refer this: https://reactnavigation.org/docs/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state
I am getting start to study Context API of the React Native.
I understand that the Context API is to solve the problem to send a lot of props in the parameters.
It seems to me as a global variable.
In this case, to use a static variable of a class in JS don't fix the problem of a variable global?
Why use Context API when we can use a static variable?
What are better in Context API?
Are others API that use Context API in React Native as pre-requisite?
In my experience you can do exactly as you're describing...
You'd set a static property App.instance = this in App's constructor.
Your App class has static methods which can access App.instance.state and App.instance.setState().
I'm curious why this approach isn't mentioned anywhere. Possibly because you can't use static properties in functional components, so it's a bit unfashionable. And it feels like it goes against react's component tree structure.
There is also the general feeling that statics are evil.
I'm building a library of stencil.js components that will be published on npm.
Internally, my components use sub-components that I do not wish to expose to the outside world.
Is there a way to define a "private" components that can be used internally by other components in the same namespace, but are not exposed externally?
You can simply create a functional component which allows you to only render it inside of you parent web component, without exposing it externally.
Functional components:
aren't compiled into web components,
don't create a DOM node, don't
have a Shadow DOM or scoped styles,
don't have lifecycle hooks, are
stateless.
Please check this doc, it is quite straight forward to use it:
https://stenciljs.com/docs/functional-components
I am trying to get better understanding of what the "context" object is in Vuex.
The context object is referred to numerous times in the Vuex documentation. For example, in https://vuex.vuejs.org/en/actions.html, we have:
Action handlers receive a context object which exposes the same set of
methods/properties on the store instance, so you can call
context.commit to commit a mutation...
I understand how to use it, and also that we can use destructuring if we only want to use the "commit" from the context object, but was hoping for a little more depth, just so I can better understand what is going on.
As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern:
what is context object design pattern? and
Can you explain the Context design pattern?
However, specifically to Vuex, I'd love a better understanding of:
What is the context object / what is its purpose?
What are all the properties/methods that it is making available to use in Vuex?
Thank you!
From the documentation you pointed out you can read:
We will see why this context object is not the store instance itself when we introduce Modules later.
The main idea of the context object is to abstract the scope of the current Module. If you simply access store.state, it will always be the root state.
The context object of actions and its properties/methods are described here in the source code and also referenced in the API documentation
Here is the list:
{
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
}
As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern ...
I think you're reading into it too much.
I don't think the Vuex docs is referring to some specific kind of "context object" that is known and defined elsewhere, they just mean that the object that is passed to action handlers (and in other situations as described in the docs) is a custom object which they refer to as a "context" object by their own definition.
The reason why they provide this object is because it contains properties that are specific to the module for that particular action handler.
according to the source code of vuex, context is just a literal object with some properties from local, and other properties from store.