应用的数据管理(Vuex):创建与使用 Store

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

在 vue 应用里可以使用 vuex 管理应用的数据,使用这个包提供的功能,去创建一个 Store,这个 Store 你可以把它想成是 vue 应用的数据仓库,在里面你可以定义应用需要的数据,获取与处理数据用的方法等等。

前端应用需要处理的数据,一般都来自服务端接口,在 vue 应用的 Store 里,你可以定义一些处理数据用的方法,比如请求服务端应用接口获取数据,或者把用户在前端应用上生产出来的数据发送给服务端应用接口,这些动作都可以定义成 Store 里的动作。

动作拿到了数据可以提交修改 Store 里的数据。在 vue 应用的组件里可以使用 store 里的数据。 在 vue 项目里要使用 vuex,可以先给项目安装一个 vuex。

打开项目的 package.json,在项目的 dependencies 里面,添加一个 vuex 作为项目的依赖,版本号可以设置成 ^4.0.0-0 。为了我们之间尽量保持一致,这里可以设置一个具体的版本。以后你可以使用更新版本的 vuex。 在终端,执行一下 yarn,或者 npm install ,准备好项目的依赖。

创建应用 Store

有了 vuex 以后,可以先去给应用创建一个 store,一般我会把整体应用相关的东西放在 app 这个目录的下面,新建一个文件,名字是 app.store.ts。

在这个文件里可以创建一个 Store,声明一个 store,用一下 createStore 这个方法,它来自刚才我们安装的 vuex。提供一个对象参数,在它里面可以定义这个 store 里的数据,修改,还有动作这些东西。

比如添加一个 state,它是一个对象,里面添加一个 appName,对应的值是 宁皓网。 这个 state 就是 store 里的数据,在组件里可以使用 store 里的这些数据,这些数据一般是用 store 里的动作获取到,然后在动作里提交修改来设置 state 里的东西。

在这个模块的最后可以默认导出上面创建的这个 store,export default store 。

应用 store

创建了 store 以后,想在应用里使用它需要再设置一下,打开应用的入口,main.ts,如果你的项目用的是 javascript 语言,打开的应该是 main.js。

先在文件顶部导入刚才创建的 appStore,来自当前目录 app 下面的 app.store ,这里导入的时候用的是一个相对的地址。

然后在创建了应用的下面,可以用这个创建的这个 vue 应用里的一个 use 方法,把 appStore 交给这个方法。这样在我们的 vue 应用里就可以使用创建的这个 store 了,可以在组件里使用 store 里的数据,可以使用它里面定义的动作等等 。

应用的数据管理(Vuex):创建与使用 Store《 Vue.js 前端应用 #12:应用架构 》

统计

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

社会化网络

关于

微信订阅号

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