<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
<button @click="test">test</button>
<button @click="test2">test2</button>
<button @click="getter1">getter1</button>
<button @click="Actions1">Actions</button>
</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0,
res:1,
test:2,
getters_:'getters_'
},
getters:{
gettersFirst:function (state) {alert(state.getters_)},
},
mutations:{
inc: state =>{return state.count++},
dec: state =>{return state.count--},
increment(state){alert(state.count--)},
test:(state) =>{alert(state.test)},
},
actions: {
Actions(count){
setTimeout(function () {
alert(count.state.test)
},1000)
}
}
})
const app = new Vue({
el: '#app',
computed: { //计算属性
count2 (){
alert(1)
},
},
methods: {//函数方法
inc () {
store.commit('inc')
},
dec () {
store.commit('dec')
},
test () {
store.commit('increment')
},
test2 () {
store.commit('test')
},
getter1(){
store.getters.gettersFirst
},
Actions1(){
store.dispatch('Actions')
}
},
watch:{}
});
/*****默认执行方法********/
// app.count2; //默认执行
// app.test2 ()
// app.jianTou ()
/*****Vue原本的方法对比********/
//1.computed是在HTML DOM加载后马上执行的，
//2.如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；
//3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
//4.所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
//总之：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods
/*****VueX的一些属性方法特点总结********/
// 1.state：包含了store中存储的各个状态也叫数据。
// 2.getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。//调用方法store.getters.gettersFirst
// 3.mutation: 一组方法，是改变store中状态的执行者。Mutation 必须是同步函数。 //缓存的方法作用 调用方法例如： store.commit('inc')
// 4.action: 一组方法，其中可以含有异步操作。 //调用方法 store.dispatch('Actions')
</script>
</body>
</html>