用 Vuex 管理应用数据

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 Vue 应用里,可以用 Vuex 来管理应用上面的数据 .. 先得给项目去安装一下 vuex .. 打开命令行工具 .. 在 Vue 项目的目录的下面 .. 执行一下 npm install vuex --save ..

现在我们可以给应用去创建一个 store,这里可以用一下 store 模块 .. 每个模块都可以有自己的 state,getters,mutations 还有 actions ..

比如应用里有内容的列表数据,可以单独为这些数据去创建一个 store 模块 .. 在项目的 src 目录的下面,创建一个文件 ... 放在 store/posts 这个目录的下面 .. 文件的名字是 index.js

在 posts 下面,再创建一个文件,名字是 state.js .. 这里可以描述一下 store 模块里处理的一些数据 ..

再创建一个 getters.js .. 它里面是一些数据的变化 .. 然后再创建一个 mutations.js .. 这里的东西是修改数据用的 .. 再创建一个 actions.js .. 它是应用上的一些动作 .. 在动作里面可以去提交 mutation 来修改应用上的数据.. mutations 里面的东西是同步的,actions 里的东西可以是异步的 ..

如果你对这些名字还不太了解,宁皓网有个专门的 Vuex 课程,可以帮助你理解这些名词 .. 在后面我们会一点一点去使用这些东西,到时候你应该也会了解到 actions,mutations 它们到底是做什么的 ..

打开 posts 这个 store 模块的入口文件,就是这个 index.js

先 import 一下 state ,位置是当前目录下的 state ... 再 import 所有的东西 as mutations .. from 当前目录下的 mutations

然后 import 所有的东西 as actions .. 来自当前目录下的 actions .. 还有一个 getters .. import 所有的东西 as getters .. 来自当前目录下的 getters

最后再 export 一个默认的对象 .. 里面添加一个 state .. mutations .. actions .. 还有 getters ..

这样我们就定义好了一个 store 模块 .. 在这个 store 目录下面再创建一个文件,名字是 index.js ..

在这个文件里,我们可以去创建一个应用需要的 store .. 先把 Vue 导入进来 .. 再导入一个 vuex ..

然后可以把所有的 store 模块也导入进来 .. 暂时我们只有一个 Store 模块 .. 起个名字可以叫 posts .. 来自当前目录下面的 posts

Vue.use .. 让 Vue 用一下 Vuex ..

下面再 export 一个 default 对象 .. 新建一个 Vuex.Store .. 一个对象参数 .. 里面添加一个 modules .. 它是一个对象 .. 对象里面把 store 模块放进来 .. 添加一个 posts 模块 ..

这个定义好的 posts 模块可以当成一个模板 .. 复制一份 .. 名字可以是 starter ..

现在可以告诉我们的 Vue 应用,使用一下刚才定义好的这个 store .. 打开应用里的这个 main.js ..

先在文件的上面,导入定义好的 store .. 位置是当前目录下面的 store ..

再把这个 store ,放到下面这个 Vue 实例里面 .. 这样在所有的 Vue 组件里面,this 的 $store 表示的就是应用的 store ..

用 Vuex 管理应用数据《 Vue.js 前端应用:项目结构 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点