Vuex的干货复习

概念：
vuex是vue配套的公共数据管理工具，它可以把一些共享的数据，保存到vuex中，方便 整个程序中的任何组件直接获取或修改我们的公共数据。

vuex是为了保存 组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，
而不必通过 父子组件传值了，如果 组件的数据不需要共享，此时，这些不需要共享的私有数据，没有必要放到vuex中

vuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库

配置vuex步骤
1.运行cnpm i vuex -S
2.导入包 import Vuex from ‘vuex’
3.注册vuex到vue中 Vuex.use(Vuex)

4.new Vuex.Store({
state:{
//可以把state想象成组件中的data,专门用来存储数据
//如果在组件中，想要访问 store中的数据，只能通过this.$store.state.***来访问
count:0
},
mutations:{
如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，
不推荐直接操作state中的数据，因为 万一导致数据的紊乱，不能快速定位到错误原因，因为，每个组件都可能有操作数据的方法

    add(state){ //记住： state第一个值已经固定死了，就是我们要操作的数据
     //注意 mutations 的 函数参数列表中，最多支持两个参数 ， 其中，参数1：是state状态
      参数2：通过commit 提交过来的参数
      state.count++
    }
    注意：如果组件想要调用mutations中的方法，只能使用this.$store.commit('方法名')
},
getters:{
     这里的getters,只负责 对外提供数据， 不负责 修改数据，如果想要修改 state中的数据，请去找 mutations
     optcount:function(state){
       return '当前最新的count值是' + state.count
     }
     //回顾对比，发现getters中的方法，和组件中的过滤器比较类似， 因为 过滤器和getters 都没有修改原数据，都是把原数据做了一层包装，提供给了调用者。
     其次，getters也和computed 比较像，只要state中的数据发生变化了，如果getters正好也引用了这个数据，那么就会立即触发getters的重新求值
}

})

new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
store：store //挂载vuex创建的store,只要挂载任何组件都能使用store来存取数据
})

总结
1：state中的数据，不能直接修改，如果想要修改，必须通过mutations提供的方法，需要通过this.$store.commit{(}^{\prime }方法名{称}^{\prime },唯一的一个参数)2.如果组件想要直接从state上获取数据：需要this.$store.state.***
3.如果store中 state上的数据，在对外提供的时候，需要做一层包装，那么 推荐使用getters 如果需要使用getters，则用this.$store.getters.***

我们可以找一个例子练一下