vuex 最简单的入门与内附示例样本(一)

请按步骤一步一步来，耐心一点

初步认识：

单一的使用场景：

vuex使用场景：

当组件2 ---->用getter获取数据----->从store里面取

添加组件---->用mutations---->更改存储的数据

尝试做一个例子出来：

第一阶段：

（1.）建一个项目：

浏览器画面：

（2）添加数据简单整改。

   （一）：只对App.vue文件更改

 （二）：对组件1和组件2 文件填写代码

接下来是看看每个组件这3个组件做了哪些改动：

（App.vue文件）

（ProductListOne.vue文件<组件1>）

（ProductListTwo.vue文件<组件2代码>）

运行代码浏览器显示画面：

好了，到此步骤。建了一个项目跑起来了。属性传值，组件引入都已使用。

第二阶段：

vuex的引入：

打开终端，如果你的项目还在运行的话control + c停止项目 

执行以下操作：

很好成功后打开项目：package.jason文件中的依赖关系中多了一个选项。

进入正题，如何把App.vue文件中的数据源的产品抽离出来，使用存储状态管理去存储使用，跟组件1和组件2去对接。

请往下看：

store.js文件。添加代码

下一步删除掉App.vue中数据的中的数据。以后我们将获取store.js文件中的状态数据。此时在看项目。浏览器网页（页面展示组件12标签展示没问题。却没有数据） ：

接下来我们将对接vuex将储存的数据传入组件：

main.js文件中引入（由于store.js文件中初始化的时候（用出口修饰符）出口对外暴漏了，所以可以main.js文件可以引入使用）：

更改App.vue文件代码：

组件的修改：

在运行项目（浏览器页面）：

此时我们终于获取到商店里的数据了。

第三阶段：

Vuex getters获取数据

store.js添加的干将方法：

组件们的更改：

运行结果：

以上就是使用的干将方法调用商店中的方法。操作。

------------------------------------分割线---开始-------- ---------------------------------

谷歌浏览器安装扩展工具Vue.js devtools

运行项目再回到浏览器：

------------------------------------分割线---结束-------- --------------------------------

第四阶段：

变种实现：
更改Vuex的存储中的状态的唯一方法是提交mutation.Vuex中的突变非常类似于事件：每个突变都有一个字符串的  事件类型（类型） 和一个  回调函数（处理程序）。

实现普通的简单降价功能：

我们虽然实现了降价功能更改店仓库中的数据，但是VUE插件中，vuex捕捉不到更改的记录。

我们再做调整：

点击降价按钮浏览器页面执行效果：

此时已经追踪到了，你对商店仓库里的状态数据源进行的操作。触发了那些方法。做了怎样的修改。

第五阶段：

操作类似于变异，不同于在：

• 提交的行动是突变的，而不是直接更改状态。
• 动作可以包含任意异步操作。

运行效果：

dispath分发提交动作进一步发现，当我们点击了按钮，进入到动作里面后，2秒后才执行，价格才发生变化。这种方式更易于我们开发调试。

传参：自定义参数：

运行效果：

mapGetters和地图行动使用：

运行：

效果一样。更简洁。