标签(空格分隔): vue
官方文档
以下操作全部放在了这个项目当中
https://github.com/itguide/vu...
提交的时候页面状态发生变化,但是真正的状态是没有变化的
在/src/store/index.js 的mutations里面模拟异步发现状态是混乱的,页面改变了,而devtool工具里面的state状态不一致 如下面图片
/src/store/index.js 代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
num: 100
},
mutations: {
// 任何时候改变state的状态都通过提交 mutation 来改变
// 里面可以定义多个函数,当触发这个函数就会改变state状态
addIncrement(state, stark) {
console.log(stark);
// 接收一个state作为参数, 相当于上面的state
// 模拟异步,状态会发生混乱
setTimeout(() => {
state.num += stark.n;
}, 1000)
},
minIncrement(state) {
state.num -= 5;
}
}
})
export default store
解决上面异步问题需要利用vuex里面的actions
代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
num: 100
},
mutations: {
// 任何时候改变state的状态都通过提交 mutation 来改变
// 里面可以定义多个函数,当触发这个函数就会改变state状态
addIncrement(state, stark) {
console.log(stark);
// 接收一个state作为参数, 相当于上面的state
// 模拟异步,状态会发生混乱
// 页面的数据和这个里面的数据不一致,
// 当我们在这里请求接口的时候,会发生异步,会出现问题
// mutations设计原则是同步的
// setTimeout(() => {
state.num += stark.n;
// }, 1000)
},
minIncrement(state) {
state.num -= 5;
}
},
actions: {
addAction(context) {
// context 是一个对象
setTimeout(() => {
context.commit('addIncrement', { n: 5 })
}, 1000)
}
}
})
export default store
在组件里面利用this.$store.dispatch("addAction"); 提交actions
代码如下
<template>
<div>
<h2>加减法计算器</h2>
<div>
<input type="button" value="-" @click="minHandle"/>
<span>{{num}}</span>
<input type="button" value="+" @click="addHandle"/>
</div>
</div>
</template>
<script>
export default {
// data(){
// return {
// // num:100
// num: this.$store.state.num,
// }
// },
computed:{
num(){
return this.$store.state.num
}
},
methods:{
addHandle(){
// this.num += 5;
// 点击的时候需要改变状态,提交mutation addIncrement
// 利用$store.commit 里面 写参数相当于 mutation的函数名字
// this.$store.commit("addIncrement",{name:'stark',age:18,n:5})
// this.$store.commit({
// type:"addIncrement",
// n:5,
// age:18,
// name:'stark.wang'
// })
this.$store.dispatch("addAction"); // 在这提交 actions
},
minHandle(){
// this.num -= 5;
this.$store.commit("minIncrement")
// this.$store.
}
}
}
</script>