效果图如下:
store.js代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
//状态数据
state: {
list:['默认为空']
},
//getters可以认为是store的计算属性
getters: {
list(state) {
return state.list
}
},
//存放同步函数方法
mutations: {
updateState(state,payload){
state.list = payload
},
setState(state,payload){
state.list = payload
}
},
//存放异步函数方法
actions: {
//async异步
async getTodos({commit}) {
const result = await axios.get('http://jsonplaceholder.typicode.com/todos?_limit=10');
commit('updateState', result.data);
},
//Promise异步
fetchTodos({commit}, params) {
return new Promise((resolve, reject) => {
fetch('http://jsonplaceholder.typicode.com/todos?_limit=5')
.then(res => res.json())
.then(data => {
commit('setState', data)
reject(data)
})
.catch(err => reject(err)); //抛出错误回调
});
}
}
})
组件App.vue代码如下:
<template>
<div id="app">
<!-- 匹配到的路由组件 -->
<!-- <router-view /> -->
<h1>下面是store内异步获取的数据</h1>
<h2>{{list}}</h2>
<h1>
<input type="button" value="同步方法改变数据1" @click="updateState(11111)">
<input type="button" value="同步方法改变数据2" @click="setState(2222222)">
<input type="button" value="异步方法获取数据1" @click="getTodos()">
<input type="button" value="异步方法获取数据2" @click="fetchTodos()">
</h1>
</div>
</template>
<script>
//导入vuex辅助函数
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name: 'app',
//这里面存放数据
data(){
return{
}
},
//获取计算数据
computed: mapGetters(['list']),
methods:{
//获取store内同步方法
...mapMutations(['updateState','setState']),
//获取store内异步方法
...mapActions(['getTodos','fetchTodos'])
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>