使用vuex简单的实现系统中的状态管理

雨点打透心脏的1/2处 2024-02-19 18:37 14阅读 0赞

最近项目中用到了vue,其中状态的集中管理使用到了vuex,因此就学习vuex做一个简单的记录。vuex的官方网址如下： https://vuex.vuejs.org/zh-cn/ [vuex][]

当我们的项目慢慢做大的时候，各个父组件和子组件之间有些状态需要项目共享，比如用户在父组件中登录后，在各个子组件中需要用到登录信息，虽然可以使用父子组件之间的通选解决，但是使用vuex可以达到更好的效果。

在vuex中有几个核心的概念：

**state** : 这个就是父子组件中需要共享的状态，即共享的数据，比如用户的登录信息等

action: 这个可以理解为执行的动作，这个里面可以执行一些逻辑的判断，判断最终需要提交那个mutation

mutation: 在mutation中可以进行state中的数据的修改，其余的地方不建议进行state中数据的修改

官网上vuex的执行流程图。  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE1LzJkNWViNGZmLWYxMDEtMzkyMC1iOWE4LTkzNTUyODViM2ZlZC5wbmc][]

在此我们简单的实现一个计数的小例子，实现父组件中的数据修改后，子组件中可以获取到数据的变化

**程序中的代码结构如下**  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE3L2UzMDlhMTMzLTFmZjYtM2U0YS05ODFmLTkyNGEyZjQ3NGUwZS5wbmc][]  
1、创建vue项目 vue init webpack vue-study

2、 cd vue-study

3、 npm install

4、安装vuex npm install vuex --save

5、创建上面代码中的store目录的文件

store目录中各文件的内容  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE5L2RjOWRiMzA2LTEyOTUtMzAzZS05MmQ3LTViYWZiZTY5YjIwOC5ibXA][]  
main.js中的内容  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODIxL2I4ZDI1YTY3LTY2MjUtM2QxMC1hNjM0LWQ0ZjQ1YmRjODcwOC5wbmc][]  
6、执行步骤：  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODIzL2NiOTM4OGIzLTM3NmMtMzM4OC1iODVkLTYzYjJiYWYxYjEyZS5wbmc][]

7、执行结果  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODI1LzM3NzIxNTFiLTFkNjAtMzg2MC1iMGU3LWYzNGNjZTJiZWNkZC5wbmc][]

8、代码见附件中的 **vue-study.zip** 这个。  
  
9、学习vuex时的一个思维导图 (**示例中的例子二是本文中的例子，例子一是我刚学习vuex时的例子，可以看一下里面概念性的内容，部分内容也有截图指出**)  
  
![aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODM0L2FhNjJiYmM5LTU3MTItMzRhNi1hZTYxLThhNThkMjExZWFmZS5qcGVn][]

[vuex]: https://vuex.vuejs.org/zh-cn/
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE1LzJkNWViNGZmLWYxMDEtMzkyMC1iOWE4LTkzNTUyODViM2ZlZC5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a5af33f54b934939a93751f3540b69cc.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE3L2UzMDlhMTMzLTFmZjYtM2U0YS05ODFmLTkyNGEyZjQ3NGUwZS5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a8112ceeac63425bae2a94ad14311998.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODE5L2RjOWRiMzA2LTEyOTUtMzAzZS05MmQ3LTViYWZiZTY5YjIwOC5ibXA]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8f7ef007d52e49c9876e86a2b00f8a21.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODIxL2I4ZDI1YTY3LTY2MjUtM2QxMC1hNjM0LWQ0ZjQ1YmRjODcwOC5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ed506ef412574d3a83a7fec26ea9e0dc.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODIzL2NiOTM4OGIzLTM3NmMtMzM4OC1iODVkLTYzYjJiYWYxYjEyZS5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0297b524b4154df695c698366048a67e.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODI1LzM3NzIxNTFiLTFkNjAtMzg2MC1iMGU3LWYzNGNjZTJiZWNkZC5wbmc]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/25bd260a6eb943ffb17ea2aa207655d1.png
[aHR0cDovL2RsMi5pdGV5ZS5jb20vdXBsb2FkL2F0dGFjaG1lbnQvMDEyNy8zODM0L2FhNjJiYmM5LTU3MTItMzRhNi1hZTYxLThhNThkMjExZWFmZS5qcGVn]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9b585f28683e4e4ebf1a19956073a06e.png