vuex 学习 01

一、什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、使用：

1、安装。

npm install vuex --save

2、在项目某个文件夹下  新建文件夹（store）=> store.js 

3、在store.js 里

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*1.state在vuex中用于存储数据*/
var state={
    count:1,
    list:[]
}
/*2.mutations里面放的是方法，方法主要用于改变state里面的数据*/
var mutations={
    incCount(){
        ++state.count;
    },
    addList(state,data){
        state.list = data;
    }
}
//vuex  实例化 Vuex.store   注意暴露
const store = new Vuex.Store({
    state,
	mutations   
})
export default store;

4、在需要使用的页面  （good.vue) 下  的 script内  引入

<script>
	//1. 引入store
	import store from '../vuex/store.js';
	export default {
		data() {
			return {
				list:[]
			};
		},
		store,
		methods:{
			inccount(){
				this.$store.commit('incCount');
			},
			requestData(){
				 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
				 this.$http.get(api).then((res)=>{
					 this.list = res.body.result;
					 this.$store.commit('addList',res.body.result)
					 
				 },(err)=>{})
			}
		},mounted() {
			//判断 store里面有没有数据
			var listData=this.$store.state.list;
			
			if(listData.length>0){
				this.list = listData;
			}else{
				this.requestData();
			}
		}
	}
</script>