持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vuex相关知识
- 这是基于我学习的笔记而来的文章
- backend: 后端 frontend: 前端
简单的案例
- 我们还是实现一下之前的案例
- 首先, 我们需要在某个地方存放我们的Vuex代码
- 这里, 我们先创建一个文件夹store, 并且在其中创建一个index.js文件
- 在index.js文件中写入如下代码:
使用Vuex的count
-
好的, 这就是使用Vuex最简单的方式了.
-
我们对使用步骤, 做一个简单的小结:
- 1.提取出一个公共的store对象, 用于保存在多个组件中共享的状态
- 2.将store对象放置在newVue对象中, 这样可以保证在所有的组件中都可以使用到
- 3.在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state.属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
-
注意事项:
- 我们通过提交mutation的方式, 而非直接改变store.state.count
- 这是因为Vuex可以更明确的追踪状态的变化, 所以不要直接改变store.stae.count的值
使用Vuex的count
-
好的, 这就是使用Vuex最简单的方式了.
-
我们对使用步骤, 做一个简单的小结:
- 1.提取出一个公共的store对象, 用于保存在多个组件中共享的状态
- 2.将store对象放置在newVue对象中, 这样可以保证在所有的组件中都可以使用到
- 3.在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state.属性的方式来访问状态
- 通过this.$store.commit('mutation中方法')来修改状态
-
注意事项:
- 我们通过提交mutation的方式, 而非直接改变store.state.count
- 这是因为Vuex可以更明确的追踪状态的变化, 所以不要直接改变store.stae.count的值
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于vuex的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
