一、打开项目在src目录store下新创建建modules/cart.js(所需模块,本案例用cart.js)
二、在cart.js中先进行配置如namespaced:true(开启命名空间,作用是在项目大的时候可以使得每个模块独立,互不影响)
三、提供state,提供方式
四、在store/index.js核心文件下进行导入和挂载cart模块
五、配置成功界面(可以看到cart模块)
六、json-server启动服务器。
七、.请求数据存入vuex中
(1)安装axios
(2)准备actions和mutations(流程:拿到数据提交到mutations中,基于mutations来修改状态)
(3)调用action获取数据
八、请求数据存入vuex中的详细步骤:
1.在模块中提供mutations,定义一个方法。(mutations用于修改state因此第一个参数为state。)
2.在actions中发送请求(请求方法和地址是json-server提供的)
3.在页面中调用,在app.vue中一进页面调用因此在created中调用,getlist是actions中方法的名字。
4.调用mutations方法去把数据存入vuex
5.在页面中接收渲染