Vue.js框架--Vuex实现组件里数据持久化（二十八）

主要操作技能：

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中取数据

Vue.js框架--Vuex实现组件里数据持久化（二十八）

猜你喜欢