标签：tor fun 事件 str 操作 3.0.0 相同 color time
整理自‘游鱼与渔’的文章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);}
标签：tor fun 事件 str 操作 3.0.0 相同 color time
原文地址：https://www.cnblogs.com/FunkyEric/p/9040104.html
