TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: Vue developers, how do you do your Vuex?

6 点作者 jgalvez将近 7 年前
I recently wrote an article where I discuss code organization practices for Nuxt apps:<p>https:&#x2F;&#x2F;vuejsdevelopers.com&#x2F;2018&#x2F;07&#x2F;16&#x2F;7-tips-large-nuxt-app-vue&#x2F;<p>There I mention https:&#x2F;&#x2F;gist.github.com&#x2F;galvez&#x2F;57771b43caf26cdbc9f903c0e81dbb63<p>A little helper I wrote to put my Nuxt app&#x27;s Vuex Store together more cleanly.<p>I also came across this recently: https:&#x2F;&#x2F;gist.github.com&#x2F;uriannrima&#x2F;d131db13256255d2f07d9e33e7adca63<p>Which seems like the beginning of a good idea. I&#x27;m looking to know other approaches and ideas to try and improve this further.<p>If you&#x27;re Vue developer and have got something along these lines to show, please do!

1 comment

cutety将近 7 年前
I wish there was more information out there about what some more people are doing with Vuex that wasn&#x27;t trivial &quot;how to put api data in store&quot;. So, thanks for your contribution to putting a bit more advanced Vuex tips out there. But, I&#x27;m mostly happy with Vuex (been using it since v1), and v2 actually fixed 90% of my annoyances with using it. I essentially use just use namespaced modules as database tables (so modules just store specific types of records), or a simple k-v module that will get used for components that need one for simple caching, and sometimes as a poor mans GenServer as a way to track shared state for multiple short-lived components. I try to keep any data more than a few children need in it, so I don&#x27;t have to keep passing data all around. Really if the data isn&#x27;t specific to a component (e.g. is this button showing?) I&#x27;ll usually put it in Vuex somewhere.<p>However, one thing I think is being heavily underutilized is the plugin api. I got sick of writing boilerplate code for different api endpoints&#x2F;modules, I thought I&#x27;d give making a plugin a try to take care of it for me, and now I&#x27;m super annoyed I had been just ignoring it before. I was able to get rid of all my boilerplate code, now if I need to add a new endpoint&#x2F;module I just have to pass the type name and the root endpoint it can be reached at, and because I&#x27;m following the JSONApi spec, the responses to things are then able to find the rest of the way around the api programmatically through actions. I then setup a few Proxy&#x27;s, so that when you get a record from the store, you can fetch relations data from it&#x27;s module by just accessing it&#x27;s name like you would on a Rails&#x2F;Django setup `record.child` will lookup the childs module in the store and pull fetch it if it has been loaded. Now that I don&#x27;t have to put up with my biggest annoyance, there really isn&#x27;t anything I&#x27;m particularly unhappy with about using it.<p>But, it did get me thinking about what kinda cool (if only as a proof-of-concept) things you could make with the plugin api. So, to get a little more familiar with it, I recently spent a day or so making a generic Queue plugin that will create arbitrary queue modules, as well a prioritized queues, and uses Proxy&#x27;s to provide an api for easily working with them. I don&#x27;t see any real need or use cases for it, except for why I made it, which is my next PoC plugin -- a background processor (e.g. Sidekiq&#x2F;Celery) using WebWorkers and Vuex as the queue&#x2F;bus -- and even then that&#x27;s not going to particularly useful for most people. It just seems like a neat idea to play with.<p>My queue plugin in is (as of now) on GitHub[1] if you want to take a look for whatever reason. The documentation is pretty sparse, and likely not 100% accurate, but it was working the last time I was working on it (also the first time... one of these days).<p>I also plan to eventually rip the JSONApi plugin I made out of the app and open source it too, as I could see a few people getting some use out of it.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;NickHurst&#x2F;Queuex" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;NickHurst&#x2F;Queuex</a>