vuex入门
Posted FunkyEric的小九九
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuex入门相关的知识，希望对你有一定的参考价值。
整理自‘游鱼与渔’的文章http://www.cnblogs.com/first-time/p/6815036.html，建议看原文。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>vuex</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.0/vuex.js"></script> </head> <body> <div id="app"> <seeme></seeme> </div> <script type="text/javascript"> Vue.use(Vuex); var myStore = new Vuex.Store({ state: { //存放组件之间共享的数据，在$store.state中 name: \'Cherry\', age: 24, num: 1 }, mutations:{ //通过commit一个mutation，显示地变化state中的数据 //mutations下的函数接受state作为第一个参数 //以及一个payload对象作为第二个参数，payload是提交的内容。 //mutations必须是同步方法 //mutations只是定义方法，需要在组件中提交（commit） change(state,a) { console.log(state.num += a); }, changeAsync(state,a) { console.log(state.num += a); } }, getters:{ //getters用于筛选state中的数据 //getters下的函数接受state作为第一个参数，过滤后的数据在$store.getters中 getAge(state) { return state.age; } }, actions: { //actions中函数可以执行异步方法 //actions需要通过mutations提交的函数实现异步 //actions下的函数接受的第一个参数context是与$store实例相同对象 //第二个参数接收mutationgs函数的payload参数 //actions需要在组件中提交（dispatch） add(context,value) { setTimeout(function() { context.commit(\'changeAsync\',value); },1000) } } }) Vue.component(\'seeme\',{ template: `<div> <p @click="changeNum">姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p> <button @click="changeNumAsync">ChangeAsync</button> </div>`, computed: { name: function() { return this.$store.state.name; }, age: function() { return this.$store.getters.getAge; }, num: function() { return this.$store.state.num; } }, mounted: function() { console.log(this); }, methods: { changeNum() { //这里提交mutations中的变化 this.$store.commit(\'change\',10); }, changeNumAsync() { //这里提交actions中的变化 this.$store.dispatch(\'add\',5); } } }) new Vue({ el:"#app", data:{ name: \'Eric\' }, //将myStore添加到实例中，实例中的组件则可以使用 store: myStore, mounted: function(){ console.log(this); } }) </script> </body> </html>
4个核心选项：state mutations getters actions
那如何获取到state的数据呢？
一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）
state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
getters：有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？ 过滤的数据会存放到$store.getters对象中。
mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。 mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！
actions：
actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下
context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。
dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。
action的大体流程：
1.在actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中 context.commit(\'changeAsync\',value);
2. 在组件里： changeNumAnsyc:function(){this.$store.dispatch(\'add\', 5);} 将dispatch“指向”actions选项里的函数
3. 在mutations选项里，要有对应的函数 changeAsync:function(state,a){console.log(state.num +=a);}
以上是关于vuex入门的主要内容，如果未能解决你的问题，请参考以下文章