在 Vue 应用里创建与使用 Store

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

先给我们这个空白的 Vue 应用安装一个 vuex,打开 package.json,在项目的 dependencies 里面,添加一个 vuex,设置一下需要的版本,比如 ^4.0.0-0 。

打开终端,在项目所在目录的下面,执行一下 npm install 或者 yarn ,准备好项目的依赖,命令会把刚才我们添加的 vuex 安装在项目里。

vuex 给 Vue 应用提供了状态管理功能。就是你可以用它管理在 Vue 应用上使用的数据。

有了 vuex 以后先去创建一个 store,放在 src/app 目录的下面,名字叫 app.store.ts。 在这个文件里可以创建并且导出一个 store。

添加一个 store,它的值可以用一下 createStore 这个函数,这个东西来自 vuex ,编辑器自动帮我们导入了 createStore。

先给这个函数提供一个空白的对象。

最后可以达个模块里默认导出创建的这个 store。 export default store 。 下面要告诉 vue 应用,使用创建的这个 store 。

打开 src/main.ts ,先在文件的顶部,导入 appStore ,来自当前目录 app 下面的 app.store。

在创建的这个 vue 应用的下面,可以用一下 app 上面的 use 这个方法,把要使用的 store 交给这个方法。这里就是 appStore 。

这样我们就可以在 Vue 应用里使用创建的这个 Store 了,你可以在上面定义 Store 的 state,getters,mutations 还有 actions 。

在 Vue 应用里创建与使用 Store《 Vue.js 前端应用 #6:数据管理 》

统计

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

社会化网络

关于

微信订阅号

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