Comments (8)
In Vuex, the equivalent of a "reducer" is just a collection of mutation handlers that operate on the same sub tree of your state. When creating the store, the mutations
option can be an Array of objects. This array is essentially the equivalent of combineReducers
.
from vuex.
But it becomes tricky for a reusable widget.
Say my widget expose its state/mutation/action for reuse. All of them are developed without the knowledge of the whole SPA. The mutations could only get the state of the widget itself. When reused in the SPA, the state of the widget becomes a subtree of the whole state. But the mutations now get the whole state tree instead of its subtree, which is not defined yet during the widget development.
Another problem might be naming conflicts according to the flat design of mutations/actions array.
It would be great if there is official support to resolve the state of the widget from the whole state tree, and to pass into the mutations/actions. E.g. is it possible to form the mutations/actions array as tree structure which maps to the path of sub state tree, and have the framework resolve the path for mutations?
`
state -> a -> b -> sub state tree of widget A
mutations -> a -> b -> mutations of widget A
actions -> a -> b -> actions of widget A
`
from vuex.
@blu3gui7ar that makes sense. Yes, it would be great to have a built-in mechanism to simplify this. I'm open to suggestions! Can you give an example of your current approach?
from vuex.
My current approach is verbose. My expectation is that with the help of framework, the widget itself should have no code change. So I tried to make less change inside my widget code.
The main idea currently is a Config created with a resolver (maps whole state to sub state) and a prefix (rename mutations/actions to avoid naming conflicts). It prepends prefix to raw mutations/actions, and wrap the raw mutations with resolver called before pass in the state.
https://github.com/blu3gui7ar/b9-modeler/blob/develop/src/store/index.js
The verbose part is that I need to pass the config object to every components of the widget.
Then, with a little helper class (https://github.com/blu3gui7ar/b9-modeler/blob/develop/src/components/actions.js),
const callables = _.mapValues(rawActions, (func, name) => function (config, ...args) {
return config.action(name)(...args)
})
export default callables
I could call transformed actions with config as the first arg
import actions from './actions'
const { addNode } = actions
......
addNode(this.config, xxxxxx)
....
Also, state could be referenced with helper class (https://github.com/blu3gui7ar/b9-modeler/blob/develop/src/components/states.js)
export function rootMeta () {
return this.config.getState().rootMeta
}
And to use it in the SPA state tree:
https://github.com/blu3gui7ar/b9-modeler/blob/develop/src/sample/store.js
//Config for the widget
const b9mConf = new Config({
resolve: state => state.modeler,
prefix: 'b9m_'
})
//extract the transformed state/mutations/actions
const {
state: b9state,
mutations: b9mutations,
actions: b9actions
} = b9mConf.customized()
//The whole state tree for SPA
const store = new Vuex.Store({
state: {
modeler: b9state
},
mutations: b9mutations,
actions: b9actions
})
//tricky: store the whole state ref
b9mConf.setStore(store)
//export for reference
export { store as default, b9mConf}
from vuex.
API in my mind might be something like
const store = Vuex.combine({
'/': {
state: xxx,
mutations: xxxx,
actions: xxxx
},
'a.b.c': {
state: xxx,
mutations: xxxx,
actions: xxxx
},
'a.b.d': {
state: xxx,
mutations: xxxx,
actions: xxxx
}
})
from vuex.
I really haven't thought this through, but what if the overall store contained sub-stores, in much the same way Vue components do? The Vuex.Store
constructor could take a stores
option.
Then you could call something like store.widgetA.actions.awesomeAction()
, and access the "sub-state" like store.widgetA.state
internally to a widget.
I've been thinking more about the related issue of a Vuex "plugins" which are intended to operate on the entire state tree, but might provide commonly used mutations, actions, middlewares to the app. I ended up subclassing Vuex.Store
to add persistence which obviously doesn't work very well for more than one plugin. It's early, and rough, but: https://github.com/bradstewart/vuex-persist/blob/master/index.js .
from vuex.
I think its also related to #31
from vuex.
shipped in 0.4.x
from vuex.
Related Issues (20)
- vuex的例子报错
- Add useStore for v3 for vue 2.7 with composition api HOT 5
- Fix type definitions with `moduleResolutions` `nodenext` HOT 3
- The getter is updated, but the associated dom is not updated. HOT 8
- Mutation on nested properties
- vite 创建vue项目,安装vuex后vscode报错,Could not find a declaration file for module 'vuex'. HOT 7
- TypeError: Cannot read properties of undefined (reading 'state') at Proxy.mappedState (vuex.esm-bundler.js:1162:31) HOT 1
- Dynamic module not registered after hot reload
- vuex.esm-bundler.js is missing in the dist folder
- Error in Vuex document link HOT 2
- link pointing errors in docs HOT 1
- Memory increase: Update from 4.0.2 to 4.1.0 HOT 2
- A research for generating PR checklists in Pull Request Template HOT 1
- TypeError: Cannot read properties of undefined (reading '$store')
- Using `vuex` with the latest version of `vue` has a broken hot reload test HOT 1
- Is there way to exclude @vue/devtools-api code from final bundle?
- vuex3.6.2内存泄漏
- 使用mudule,在一个模块中commit另一个模块的mutations报unknown local mutation type
- Vuex Devtools plugins registered on server which increases memory usage
- 官网崩了
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuex.