Vue.js框架--Vuex實現元件裡資料持久化(二十八)
阿新 • • 發佈:2018-11-16
主要操作技能:
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式
新聞頁面每次切換路由時,再次訪問就會請求資料;那麼如何直接從vuex中持久化資料呢?
1)在store.js中 state定義list陣列
/*1.state在vuex中用於儲存資料*/
var state = {
count: 1,
list: [] //儲存新聞資料
}
2)在mutations中寫方法 addList(state,data)
//2.mutations裡面放的是方法,方法主要用於改變state裡面的資料
var mutations = {
addList(state,data) { //如果有引數必須要有state這個引數哦!
// state.list.push(data); //請求的資料存入到list中
state.list = data;
}
}
編寫程式碼:
News.vue 傳統的方式
<ul class="list"> <li v-for="item in list"> {{item.aid}}--{{item.title}} </li> </ul> <script> import store from '../vuex/store.js' export default { data() { return { title: '新聞元件!', list: [] } }, store, methods: { changCount2() { this.$store.commit('incCount') //觸發state裡面的資料 }, requestData() { //新聞列表介面: var urls = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.jsonp(urls).then((response) => { console.log(response); //save list this.list = response.data.result; }, function(err) { //處理錯誤的回撥 console.log(err); }) } }, mounted() { // this.requestData(); } } </script>
效果:來回切換路由,就會每次請求資料
News.vue 持久化資料
<script> import store from '../vuex/store.js' export default { data() { return { title: '新聞元件!', list: [] } }, store, methods: { changCount2() { this.$store.commit('incCount') //觸發state裡面的資料 }, requestData() { //新聞列表介面: var urls = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.jsonp(urls).then((response) => { console.log(response); //save list this.list = response.data.result; //資料存放到store //第一個引數方法名:addList //第二個引數資料: response.data.result this.$store.commit('addList',response.data.result); }, function(err) { //處理錯誤的回撥 console.log(err); }) } }, mounted() { var listData=this.$store.state.list; console.log(listData.length); //判斷store中有沒有資料 if(listData.length>0){ //有資料 this.list=listData; }else{ //沒有請求資料 this.requestData(); } } } </script>
效果:來回切換路由,就會從Vuex中取資料