先给我们这个空白的 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 。