Vuex

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

在项目里,我们要使用 vuex 去管理应用的数据 .. 先得去安装一下 vuex .. 回到命令行工具 .. 在项目的下面,执行一下 npm install vuex --save

完成以后,回到项目 ... 再去给应用创建一个 store .. 在项目的 src 下面,新建一个文件 .. 放在 store 目录的下面,文件的名字是 index.js .. 这个文件可以作为 store 的入口文件...

再这个 store 目录的下面,再创建几个文件 .. 添加一个 state.js .. 应用的数据都在一个 state 里面 ..

再添加一个 getters.js ,在应用里可以通过 getter 得到数据 .. 然后添加一个 mutations.js .. 应用里对数据的修改要通过 mutation 去完成 ..

最后再添加一个 actions.js .. 应用里面可以执行一下 action,就是动作 .. 在动作里可以提交 mutation 去修改数据 ...

创建 Store

回到这个 index.js ,在这里去配置使用一下 vuex ..

先导入 Vue .. import Vue from 'vue' .. 接着再导入 Vuex ... import Vuex from 'vuex'

然后导入 state .. 位置是在当前目录下面的 state ..

再导入 mutations .. 位置是当前目录下面的这个 mutations ..

再导入所有的 actions .. import 所有的东西 as actions from 当前目录下面的 actions .

最后再导入所有的 getters .. import 所有的东西 as getters from 当前目录下的这个 getters

再配置一下 Vue ,让它使用 Vuex ..

然后 export default ,导出一个默认的东西 .. 导出的就是创建的 Store,新建一个 Vuex.Store .. 一个对象参数 .. 把上面导入的东西放到这里 .. state .. getters .. mutations .. 还有 actions ..

使用 Store

再打开应用的入口文件,就是 src 下面的这个 main.js .. 先导入刚才我们创建的 Store .. 位置就是当前目录下的 store ..

在下面这个 Vue 实例里面,给它添加一个 store ..

现在我们的应用就配置好,可以使用 vuex 来管理应用里的数据了 ..

Vuex《 Vue.js:应用案例(Vuex) 》

统计

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

社会化网络

关于

微信订阅号

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