npm i redtail
import {init} from 'redtail';
const store = init(new Vuex.Store({
state: {
message: 'Hello!'
},
// 直接书写异步代码
setMessageAsync (context, newValue) {
setTimeout(() => {
context.commit('message', newValue)
});
}
}));
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
import {connet} from 'redtail';
new Vue(connet({
el: '#app',
methods: {
setMessage () {
store.commit('setMessageAsync', 'World!')
}
}
}));
</script>
完整的vuex实例应该是
const store = new Vuex.Store({
state: {
message: 'Hello!'
},
// getter 集合
getters: {
getMessage: state => {
return state.message;
}
},
// setter 集合
mutations: {
setMessage (state, newValue) {
// 变更状态
state.message = newValue;
}
},
actions: {
setMessageAsync (context, newValue) {
setTimeout(() => {
context.commit('setMessage', newValue)
});
}
}
});
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
new Vue({
el: '#app',
computed: {
...mapGetters([
'getMessage',
// ...
])
},
methods: {
setMessage () {
store.commit('setMessageAsync', 'World!')
}
}
});
</script>