cnpm install vuex --save

import store from './store' //引入store
 
new Vue({
  el: '#app',
  router,
  store, //掛載store，this將自動(dòng)生成$store屬性
  template: '<App/>',
  components: { App }
})

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

/*********  3-1 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={ //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
     themeColor: {val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
 const store = new Vuex.Store({
       state
    });
 
export default store;

/*********  3-2 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
      state:{
       	 //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
	     themeColor: {val:'blue',opacity:false},
	     changeThemeCount:0,
	     cache:''
       }
    });
 
export default store;

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={ //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
     themeColor: {val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    getThemeColor(state) {  //定義函數(shù)，返回處理過(guò)的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天則主題色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const store = new Vuex.Store({
       state, // 掛載存取數(shù)據(jù)功能
       getters //掛載數(shù)據(jù)計(jì)算功能
});
export default store;

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={ //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
     themeColor: {val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    getThemeColor(state) {  //定義函數(shù)，返回處理過(guò)的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天則主題色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    //自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
    clearCatch(state) { 
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){ 
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const store = new Vuex.Store({
        state, // 掛載存取數(shù)據(jù)功能
       getters, //掛載數(shù)據(jù)計(jì)算功能
       mutations // 掛載函數(shù)功能
});
export default store;

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={ //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
     themeColor: {val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    getThemeColor(state) {  //定義函數(shù)，返回處理過(guò)的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天則主題色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    //自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
    clearCatch(state) { 
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){ 
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const actions = {
    //自定義觸發(fā)mutations里函數(shù)的方法，context與store 實(shí)例具有相同方法和屬性
    setThemeColorAction(context,color,opacity){
     	context.commit('setThemeColor',color,opacity);
    }
};
const store = new Vuex.Store({
       state, // 掛載存取數(shù)據(jù)功能
       getters, //掛載數(shù)據(jù)計(jì)算功能
       mutations, // 掛載函數(shù)功能
       actions， // 掛載異步函數(shù)
});
export default store;

export default new Vuex.Store({
  strict: true,
  state: {
    ...
  },
  ...
}

//home.js

const state={
    users:[] //存訪問(wèn)該頁(yè)面的所有用戶
};
const getters={
  getUsers(state){ //獲取訪問(wèn)該頁(yè)面的所有用戶
    // 對(duì)數(shù)據(jù)清理-除去臟數(shù)據(jù)
  	if (state.users.includes('*')) delete state.users['*'] 
    	return state.users;
  }
};
const mutations={
     addUser(state,name){ //增加訪問(wèn)用戶
        state.collects.push(name)
     }
 };
const actions={
    invokeAddUser(context,name){ //觸發(fā)mutations里面的addUser,傳入數(shù)據(jù)形參name對(duì)應(yīng)到users
        context.commit('addUser',name);
    }
};
// 注意和倉(cāng)庫(kù)的區(qū)別
const store = {
     // namespaced用于在全局引用此文件里的方法時(shí)標(biāo)識(shí)這一個(gè)的文件名，使得讓人明白這些數(shù)據(jù)來(lái)自哪個(gè)倉(cāng)庫(kù)
     // 即當(dāng)你需要在別的文件里面使用子倉(cāng)庫(kù)(mapStates、mapGetters、mapActions)時(shí)，里面的方法需要注明來(lái)自哪一個(gè)模塊的方法
     namespaced:true,
     state,
     getters,
     mutations,
     actions
}
export default store;

import Vue from 'vue';
import Vuex from 'vuex';
import home from './modules/home.js'

Vue.use(Vuex);
 const state={ //要設(shè)置的全局訪問(wèn)的state對(duì)象,賦予初始屬性值
     themeColor: {val:'blue',opacity:false},
     changeThemeCount:0,
     cache:''
   }; 
const getters = {   //實(shí)時(shí)監(jiān)聽(tīng)state值的變化(最新?tīng)顟B(tài))
    getThemeColor(state) {  //定義函數(shù)，返回處理過(guò)的val，命名最好有代表性
       let hour = new Date().getHours();
       // 如果白天則主題色不透明，反之
       state.themeColor.opacity = 8 <= hour && hour <= 20;
       return state.themeColor
    }
};
const mutations = {
    //自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
    clearCatch(state) { 
        state.cache = "";
        state.changeThemeCount= 0;
    },
    setThemeColor(state,color,opacity){ 
       state.themeColor.val = color;
       state.themeColor.opacity = opacity;
       state.changeThemeCount++;
    }
};
const actions = {
    //自定義觸發(fā)mutations里函數(shù)的方法，context與store 實(shí)例具有相同方法和屬性
    setThemeColorAction(context,color,opacity){
     	context.commit('setThemeColor',color,opacity);
    }
};
const store = new Vuex.Store({
       state, // 掛載存取數(shù)據(jù)功能
       getters, //掛載數(shù)據(jù)計(jì)算功能
       mutations, // 掛載函數(shù)功能
       actions， // 掛載異步函數(shù)
       modules:{ // 掛載子倉(cāng)庫(kù)
         home
    	}
});
export default store;

import {mapState,mapGetters,mapActions} from 'vuex';

	//這里的...是超引用，映射內(nèi)容，可以寫在computed下、methods下等（一般放在開(kāi)頭）
	// 直接從庫(kù)中取值 - 將庫(kù)里的users值返回給字典中的users并映射給this組件
 	...mapState({  
         users:state=>state.home.users  
      }),
     // 使用計(jì)算屬性 - 將庫(kù)里的users計(jì)算后的值返回給字典中的users并映射給this組件
    ...mapGetters('home',{ 
         users:'getUsers' //獲取清理后的數(shù)據(jù)
         //由于home倉(cāng)庫(kù) namespaced:true,所以第一個(gè)參數(shù)作為標(biāo)識(shí)
         // 不使用標(biāo)識(shí)訪問(wèn)的是主倉(cāng)庫(kù)
      })
      // 使用異步函數(shù) - 以數(shù)組中的函數(shù)名，從庫(kù)中對(duì)應(yīng)的函數(shù)映射給this組件以供使用
    ...mapActions('home',['invokeAddUser'])
    // 有某個(gè)組件 <span @click='invokeAddUser(name)'></span>
    // 或者直接使用 this.invokeAddUser(name)

  computed: mapState({
   // 箭頭函數(shù)可使代碼更簡(jiǎn)練
    count: state => state.count,

    // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
  
2、當(dāng)映射的計(jì)算屬性的名稱與state的子節(jié)點(diǎn)名稱相同時(shí)，
   我們也可以給 mapState傳一個(gè)字符串?dāng)?shù)組。
  computed: mapState([ // 數(shù)組
   "count"
  ])
  
3、倉(cāng)庫(kù)中action的第二種接收參數(shù)
const actions = {
    //自定義觸發(fā)mutations里函數(shù)的方法，{commit}與store 實(shí)例具有相同方法和屬性
    setThemeColorAction({commit},color,opacity){
     	commit('setThemeColor',color,opacity);
    }
};