vue数据管理vuex

一解读

1、store是vuex实例的核心方法，字面理解为仓库
2、Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）
3、new Vuex.Store({})有四个核心选项 states,mutations,getters,actions
4、state:存放组件之间共享的数据
5、mutations：显示的更改state里的数据
6、getters:获取state里的数据
7、actions可以异步提交mutations修改state
获取state的数据
直接获取
this.store.state.name一般会在组件的计算属性(computed)获取state的数据计算属性会监控数据变化，一旦发生改变就会响，state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据过滤获取gettersthis.$store.state.name一般会在组件的计算属性(computed)获取state的数据计算属性会监控数据变化，一旦发生改变就会响，state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据过滤获取gettersthis.$store.getters.getAge
有时候，我们需要对state的数据进行筛选，过滤getters就是干这个的：筛选需要的state数据返回，getters下的函数接收接收state作为第一个参数过滤的数据会存放到store.getters对象中mutations自改数据提交数据：this.$store.getters对象中mutations自改数据提交数据：this.$store.commit(‘change’,10)：像mutations中函数change提交一个10过去，change本身接受两个参数state和外面传过来的参数
数据存储到state中
在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个
1. 在mutations选项里，注册函数 函数里面装逻辑代码。
2.在组件里，this.store.commit(‘change′,payload)注意：提交的函数名要一一对应3.触发函数，state就会相应更改4.在组件的计算属性里this.$store.commit(‘chang{e}^{\prime },payload)注意：提交的函数名要一一对应3.触发函数，state就会相应更改4.在组件的计算属性里this.$store.state 获取你想要得到的数据
actions
既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了
　　actions和mutations的区别
　　1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
　　　2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下
实际应用
创建vuex仓库store/index.js

入口main.js

修改获取数据
修改

获取1

获取2