vuex 學習 01

1、什麼是vuex？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

2、使用：

一、安裝。

npm install vuex --save

二、在項目某個文件夾下  新建文件夾（store）=> store.js 

三、在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;

四、在須要使用的頁面  （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>