使用vuex来管理数据
最近一直工作比较忙，博客已经鸽了好久了，趁着今天是周末，写点东西吧
使用vuex来管理数据
- 最近一直在用vue做项目，但是却从来没真正去用过vuex，因为一直感觉很复杂，其实真正去研究一下啊，就会发现很容易。
vuex中，有默认的五种基本的对象：
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions：异步操作。在组件中使用是$store.dispath('')
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
怎么引用这里就不介绍了，如果使用的是3.0cli，在创建项目的时候，选择安装vuex模块，会自动配置好store.js，很方便
定义变量
- 在store.js中，你会发现有我上面提到的那些对象，这里随便定义个变量。
和页面中在data写变量差不多。
使用变量
- 就和正常的变量使用是一样的，只不过前面是$store
- {{$store.state.count}}
- 到这一步你就已经会了一小半了，很简单的吧？
回想一下，我们只需要在下载安装使用vuex，在我们定义的store.js中定义state对象，并且暴露出去。
在main.js中使用我们的store.js（这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）
现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions
我们继续操作store.js文件
我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。
// 其实说白了就是通过其他页面的方法来调用这里的方法，所以这里要写对数据的操作，会直接同步到state
mutations: {
add(state, n) {
state.xone = state.xone + n
},
remove(state, n) {
if (state.xone > 0) {
state.xone = state.xone - n
} else {
state.xone = 0
}
}
},
然后我们在页面中，使用这个方法
methods: {
add (n) {
// 首先，通过这个向vuex传一个函数，括号内的就是函数名，传到了actions里面。这个是异步更新的
this.$store.dispatch('addFun', n)
// 如果要直接修改state的值可以用下面这个，但是官方不推荐，这个是同步更新的
// this.$store.commit('add', n)
},
remove (n) {
// this.$store.commit('remove', n)
this.$store.dispatch('removeFun', n)
}
},
- 当然了，这个n参数也是可以不传的，如果你需要一些计算的话，就传上
然后打开浏览器试一下吧，我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数
完美！
接下来就是actions，actions是异步操作
创建actions对象，并且使用
actions: {
// 调用mutations的add方法，这个addFun是从其他页面定义的方法，mutations则是接参数，这个参数对应上面的mutations，
addFun(mutations, n) {
// 这个commit可以理解为调用上面的某个方法
mutations.commit('add', n)
},
// 调用上面的remove方法
removeFun(mutations, n) {
mutations.commit('remove', n)
}
}
