一.如果你的项目中，需要用到在各个子组件中共享数据，则你就需要用到Vue.x

state:{},状态，把需要在多个组件之间共享的数据，可以理解为Vue实列中的data
mutations：{}要修改state中的数据，你只能通过mutation中的方法

使用：一旦你在vue实列中注入了store,则在所有的子组件及vue实列中，你都可以通过 this.$store.state.数据名,去修改数据，但是vuex反对这么做，因为这种方式修改数据，不会再vuex调试面板留下记录。

image.png

Mutations你可以理解它的每个属性名：表示一个事件名。它的每个属性值:表示当这个事件发生之后要调用的函数。

image.png 调用mutations

格式：this.$store.commit(“mutations中的属性名”)

注意思想：在组件内部去提交(commit) mutations

image.png

二：Vuex的四个概念

Getters:从state中的数据，取出一部分来，依据数据项产生新的结果，类似于Vue实列中的computed（计算属性）
Actions:在对数据实现异步操作时，要用的

拿数据：
方法一 :this.$store.state.amount

image.png

方法二：用计算属性computed来获取数据

image.png

方法三：直接用mapState来获取数据

image.png
mapState是一个函数，这里就是调用这个函数，实参是一个数组[“amount”]它的返回值是一个对象。 image.png

Getters

有时候希望在state中数据基础上，派生出一些其他的数据，例如：我们想知道有多少人的分数小于60分。这里就要用到getters

1.在vuex中定义getters

image.png

2.拿数据

image.png

这种写法太长了，不好看。所以用mapGetters，简化代码

image.png

Mutations:修改数据

1.比如说我们要向list里边加一条数据

在组件中使用 2. image.png 3.效果 image.png 这样写还是比较麻烦，所以用mapMutations，但是用mapMutations时候注意 image.png image.png

Actions

在mutations中，操作是异步的。

image.png image.png
所以这个会跟我们跟踪代码带来影响，所以我们要把异步操作写在actions中。

1.操作actions：

image.png

2.在组件中使用actions

image.png

3.简写

image.png