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

r囧r小猫 2024-02-19 12:46 27阅读 0赞

**主要操作技能：**

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>

**效果：来回切换路由，就会每次请求数据**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]**

News.vue 持久化数据

**效果：来回切换路由，就会从Vuex中取数据**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/55d09d31109f4dfd8fd5424335d31ade.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f9632dd2db6f4c7aa78cf29c6a467750.png