Vuex:
1.什麼是vuex 是專門為vue.js開發的狀態管理模式，他集中儲存了所有元件的狀態（包括：資料/事件...)
2.他的應用場景：中大型專案中使用
元件式開發 單頁面應用

首頁/購物車/中餐/我的---》張三（本地儲存） /當前位置（公用的）

3.使用
搭建專案
> vue init webpack-simple Demo
> cd demo
> npm install #安裝依賴

1.安裝vuex
> cd demo
> cnpm install vuex -S 

2.目錄結構
webpak.config.json
index.html
src
	main.js
	app.vue
	store(vuex的檔案（.js）)
	  state.js===>（state 資料，mutations 事件）


------------------------------------------------------------------
vuex 中的物件 state  mutations 
state.js內容
//vuex檔案的內容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = { //儲存資料
  count: 1
}
const mutations = { //改變資料狀態的  儲存事件的
  add (state) {
    state.count++;
  },
  reduce (state) {
    state.count--;
  }
}
export default new Vuex.Store({
  state,
  mutations //掛載到物件中
})

App.vue
檔案中呼叫state資料

*********原始方式：*********
在script標籤中 引入store
	import store from './store/state.js'
	export default {//中新增store
	store,
	}
在template 標籤元件中新增state資料
	{{$store.state.count}} #標籤中呼叫
	button按鈕 點選事件
	<button @click="$store.commit('add')">+</button>
	<button @click="$store.commit('reduce')">-</button>
------------------------------------------------
*********第二種方式：********* 使用vue 的computed 計算屬性
在script標籤中 引入store
	import store from './store/state.js'
	export default {//中新增store
		store,
		computed:{ //使用vue 中computed屬性 計算屬性
			return store.state.count;
		}
	}
在template 標籤元件中新增state資料
	 {{count}}

------------------------------------------------
		
*********第三種方式：*********	（推薦使用）使用vuex 的mapState屬性

在script標籤中 引入store
	import store from './store/state.js'
	import {mapState} from 'vuex'
	export default {//中新增store
	store,
	computed:{["count"]} //可以寫陣列["count"] 也可以寫物件 {count:state=>state.count} 用箭頭函式
	}
在template 標籤元件中新增state資料
	 {{count}}
---------------------------------------------------------------------
mutations 事件
** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 const state = {
  count:1
 }
 const mutations = {
  add(){
   state.count++;
  },
  reduce(){
   state.count--;  
  }
 }
 export default new Vuex.Store({
	state,mutations //掛載常量
 })

** 在App.vue檔案中

*********原始方式：********* 利用vuex的store 物件呼叫對應屬性及方法 需要commit 方法進行提交才能生效
 
 template定義元件中使用資料和事件
 {{count}}
 <hr/> 
 <button @click="$store.commit('add')">+</button>
 <button @click="$store.commit('reduce')">-</button>

 在script中引入
 import store from './store/state'
 import {mapState} from 'vuex'

 export default {
   store,
   mutations,
   computed:mapState(["count"])
 }
 
*********第二種方式：********* 利用vuex 中的mapMutations 物件進行呼叫方法內部實現方法的提交生效
template定義元件中使用資料和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>

在script中引入
 import store from './store/state'
 import {mapState,mapMutations} from 'vuex'

 export default {
   store,
   mutations,
   computed:mapState(["count"]),
   methods:mapMutations(["add","reduce"])
 }

---------------------------------------------------------------------
vuex 中的物件 getters 
getters===>相當於vue 中的computed 計算屬性 ，有過濾的效果

** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)

 const state = {
  count : 1
 }
 const mutations = {
  add(state){
    state.count++; 
  },
  reduce(state){
   state.count--;
  }
 }
 const getters = {
  count(state){
   return state.count += 10; 
  } 
 }
 export default new Vuex.Store({
	state,
	mutations,
	getters
 })
** 在App.vue檔案中
 template定義元件中使用資料和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>

 在script中引入
 import store from './store/state.js'
 import {mapState,mapMutations} from 'vuex'

 export default {
  store,
  computed:{
  //第一種方式原始getters寫法 屬性 進行過濾
    count: function (store) {
      return this.$store.getters.count
    },
    //第二種getters寫法 用es6語法 第一步引入mapGetters 模組
    ...mapState(["count"]),//es6 寫法
    ...mapGetters(["count"])
  },
  methods: mapMutations(["add", "reduce"])
 }

 ------------------------------------------------------------------
vuex 中的物件 actions
Actions類似於mutations ,不同在於
 action提交的是mutations,而不是提交狀態
 action可以包含任意非同步操作。
** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex);

 const state = {
  count:1
 }
 const mutations= {
  add(state){ state.count++},
  reduce(state){state.count--}
 }
 const actions = {
  add({commit}){ commit("add")},
  reduce({commit}){ commit.("reduce")},
  odd({commit}){if(state.count%2 == 0){ commit("add")}},
  ay({commit}){setTimeout(()=>{commit("reduce")},1000);}
 }
 export default new Vuex.Store({
  state,mutations,actions
 
 })
** 在App.vue檔案中
template定義元件中使用資料和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>
 <button @click="odd">偶數</button>
 <button @click="ay">非同步</button>
 在script中引入
 import store from './store/state.js'
 import {mapState,mapActions} from 'vuex'

 export default {
  store,
  computed:{
    ...mapState(["count"])//es6 寫法
  },
  methods: mapActions(["add", "reduce","odd","ay"])
 }

----------------------------------------------------------
vuex 中的物件 modules 模組

** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex);

 const state = {
  count:1
 }
 const mutations= {
  add(state){ state.count++},
  reduce(state){state.count--}
 }
 const actions = {
  add({commit}){ commit("add")},
  reduce({commit}){ commit.("reduce")},
  odd({commit}){if(state.count%2 == 0){ commit("add")}},
  ay({commit}){setTimeout(()=>{commit("reduce")},1000);}
 }
 const module = {
  state,mutations,actions
 }
 export default new Vuex.Store({
  modules:{
   a:module
  }
 
 })

** 在App.vue檔案中
template定義元件中使用資料和事件
 {{count}}

 在script中引入
 import store from './store/state.js'
 import {mapState,mapActions} from 'vuex'

 export default {
  store,
  computed:{
   count(){
    return this.$store.state.a.count
   }
  },
  methods: mapActions(["add", "reduce","odd","ay"])
 }



 ----------------------------------------
 vuex_的專案結構

 把state.js 拆分開用
 
 index
 src
	app.vue
	main.js
	store 
		index.js===>入口
		mutations.js===>事件/資料
		action.js===>提交事件
		types.js ===>事件名稱，定義為常量
		getters ===>computed 計算屬性/過濾 返回資料


建立store資料夾
  1.在store目錄下建立index.js===》入口
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

  import actions from "./actions"
  import mutations from "./mutations"
  export default new Vuex.Store({
	modules:{
	 mutations
	},
	actions
  })

  2.在store目錄下建立mutations.js===》存放資料和事件
  import getters from "./getters"
  const state = { count : 10}

  const mutations = { }
  export default{
   state,getters
	
  }
  3.在store目錄下建立getters.js ===》相當於計算屬性 返回屬性的
  exprot default {
	count(state){return state.count}
  }
 4.在src根目錄下找到
   ** 在main.js 中引入 store 資料和事件
   import store from './store/' //預設就是index.js
   new Vue{
	store,//掛載到Vue物件中
   }

   ** 在App.vue 元件中新增被展示的資料
   template標籤中新增
   {{count}}
   script裡面引入 vuex 按需引入物件
   import{mapGetters} from "vuex"

   exprot default{computed: mapGetters(["count"]),}
    
	執行專案可以看到 count屬性值==》資料新增完成
 5.新增事件
  在store目錄下建立types.js====》事件名稱，定義為常量
  export const ADD = "ADD";
  export const REDUCE ="REDUCE"

  在store目錄下找到mutations.js編輯事件
  引入types
  import { ADD, REDUCE } from './types' //按需引入
   const mutations = { [ADD](state){state.count++},[REDUCE](state){state.count--} }
  export default{
    mutations //掛載
	
  }

  在store目錄下建立actions.js===>提交事件
  import * as types from "./types"
  export default{
	add({commit}){commit(types.ADD)},
	reduce({commit}){commit(types.REDUCE)}
  }

  在store目錄下找到index.js 引入action 
  import actions from "./actions"
  export default new Vuex.Store({
	actions
  })

  在App.vue檔案中新增點選事件觸發
  template標籤下
  <button @click="add">+</button>
  <button @click="reduce">-</button>

  scripte內
  使用vue 的mapActions
  import {mapGetters,mapActions} from "vuex"

  export default {
   computed:mapGetters(["count"])
   methods:mapActions(["add","reduce"])
  }

  實現事件功能