主要操作技能：

     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中取資料