安裝好腳手架服務跑起來後，在src下新建vuex資料夾，vuex資料夾下新建js檔案並配置：

我命名為index.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({//建立倉庫例項
	state:{//倉庫中存放資料的地方
		count: 1
	}
})
export default store;

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex' //這是利用了檔案預設查詢機制，找到./vuex/index.js檔案

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//告訴vue使用了倉庫,該 store 例項會注入到根元件下的所有子元件中，且子元件能通過 this.$store 訪問到。
  components: { App },
  template: '<App/>'
})
 

建立一個單檔案元件（pages/User.vue檔案）：

<template>
	<div class="user">
		<button @click="handleCount">改變count</button>
		{{count}}
	</div>
</template>

<script>
	export default{
		data(){
			return {

			}
		},
		computed: {
			count(){//如果去倉庫拿資料,通過倉庫例項物件 $store 
				return this.$store.state.count;
			}
		}
	}
</script>

<style>
	.user{
		background: red;
	}
</style>
 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
//非同步元件的抽離，建立一個非同步元件
//webpack的require.ensure webpack會將require.ensure中引入的程式碼從主boundle中抽離
// import Login from '@/pages/Login'
const Login =  r => require.ensure([], () => r(require('@/pages/Login.vue')), 'login')
const User=  r => require.ensure([], () => r(require('@/pages/User.vue')), 'login')

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
    	path: '/login',
    	name: 'Login',
    	component: Login
    },{
    	path: '/user',
    	name: 'User',
    	component: User
    }
  ]
})
 

獲取資料：

輔助函式（語法糖）

當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({//建立倉庫例項
	state:{//倉庫中存放資料的地方
		count: 2,
		products: [{
			title: "東風標緻", id: 8, buy: false
		},{
			title: "廣州本田", id: 9, buy: true
		},{
			title: "一汽大眾", id: 6, buy: true
		},{
			title: "東風悅達", id: 7, buy: true
		},{
			title: "長安鈴木", id: 5, buy: false
		}]
	},
	getters: {//配置從state中衍生出來的資料
		tobuy(state){//預設第一個引數就是store的state
			return state.products.filter(v => v.buy);
		},
		nottobuy(state){
			return state.products.filter(v => !v.buy)
		}
	}
})
export default store;

獲取tobuy、nottobuy資料：

<template>
	<div class="user">
		<button @click="handleCount">改變count</button>
		{{count}}
		<hr/>
		<ul>
			<li style="background:green">我要買的：</li>
			<li v-for="(v, i) in tobuy">{{v.title}}</li>
		</ul>
		<ul>
			<li style="background:orange">我不買的：</li>
			<li v-for="(v, i) in nottobuy">{{v.title}}</li>
		</ul>
	</div>
</template>

<script>
import {mapState, mapGetters} from 'vuex';//引入語法糖物件
	export default{
		data(){
			return {

			}
		},
		computed: {
			// count(){
			// 	return this.$store.state.count;
			// }
			// 當計算屬性的key和store的state的屬性名相同時可以用mapState，都需要es7...物件擴充套件運算子：
			...mapState(['count'])//陣列語法
			// 當計算屬性的key和srote的state的屬性名不相同時：用物件語法,此時計算屬性名稱為counter
			// ...mapState({
			// 	counter: state => state.count
			// })
			,
			tobuy(){//同樣state的衍生狀態也可以使用語法糖，引入mapGetters，語法跟mapState一樣
				return this.$store.getters.tobuy;
			},
			nottobuy(){
				return this.$store.getters.nottobuy;
			}
		},
		methods: {
			handleCount(){
				 console.log(this.count)
			}
		}
	}
</script>

<style>
	.user{
		background: red;
	}
</style>

改變資料：

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數。

你不能直接呼叫一個 mutation handler。這個選項更像是事件註冊：“當觸發一個型別為 increment 的 mutation 時，呼叫此函式。”要喚醒一個 mutation handler，你需要以相應的 type 呼叫 store.commit 方法：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({//建立倉庫例項
	state:{//倉庫中存放資料的地方
		count: 2,
		products: [{
			title: "東風標緻", id: 8, buy: false
		},{
			title: "廣州本田", id: 9, buy: true
		},{
			title: "一汽大眾", id: 6, buy: true
		},{
			title: "東風悅達", id: 7, buy: true
		},{
			title: "長安鈴木", id: 5, buy: false
		}]
	},
	getters: {//配置從state中衍生出來的資料
		tobuy(state){//預設第一個引數就是store的state
			return state.products.filter(v => v.buy);
		},
		nottobuy(state){
			return state.products.filter(v => !v.buy)
		}
	},
	mutations: {
		changeCount(state, payload){//第二個引數就是元件中傳遞過來的載荷
			state.count += payload;
		}
	}
})
export default store;

<template>
	<div class="user">
		<button @click="handleCount">改變count</button>
		{{count}}
		<hr/>
		<ul>
			<li style="background:green">我要買的：</li>
			<li v-for="(v, i) in tobuy">{{v.title}}</li>
		</ul>
		<ul>
			<li style="background:orange">我不買的：</li>
			<li v-for="(v, i) in nottobuy">{{v.title}}</li>
		</ul>
	</div>
</template>

<script>
import {mapState, mapGetters} from 'vuex';//引入語法糖物件
	export default{
		data(){
			return {

			}
		},
		computed: {
			// count(){
			// 	return this.$store.state.count;
			// }
			// 當計算屬性的key和store的state的屬性名相同時可以用mapState，都需要es7...物件擴充套件運算子：
			...mapState(['count'])//陣列語法
			// 當計算屬性的key和srote的state的屬性名不相同時：用物件語法,此時計算屬性名稱為counter
			// ...mapState({
			// 	counter: state => state.count
			// })
			,
			tobuy(){//同樣state的衍生狀態也可以使用語法糖，引入mapGetters，語法跟mapState一樣
				return this.$store.getters.tobuy;
			},
			nottobuy(){
				return this.$store.getters.nottobuy;
			}
		},
		methods: {
			handleCount(){
				 this.$store.commit("changeCount", 5)//提交一個名為changeCount的mutation,第二個可選引數表示載荷，也可以是一個物件傳入，也可以將type和載荷寫成一個物件傳入{type: 'changeCount', payload: 5}
				 console.log(this.count)

			}
		}
	}
</script>

<style>
	.user{
		background: red;
	}
</style>

使用常量替代 Mutation 事件型別

使用常量替代 mutation 事件型別在各種 Flux 實現中是很常見的模式。這樣可以使 linter 之類的工具發揮作用，同時把這些常量放在單獨的檔案中可以讓你的程式碼合作者對整個 app 包含的 mutation 一目瞭然：

可以單獨新建一個js檔案命名為mutation-types.js專門用來配置要用到的事件型別名稱的常量（變數大寫是規範，不過這裡最好值也大寫，不然在後面用mapMutations的陣列語法糖時會報出常量未定義的錯）：

export const CHANGECOUNT = 'CHANGECOUNT';

並更改mutation事件屬性名,es6物件的動態屬性寫法：

mutations: {
		[CHANGECOUNT](state, payload){//第二個引數就是元件中傳遞過來的載荷
			state.count += payload;
		}
	}

然後在store檔案中和其他用到的元件頁引入：

import {CHANGECOUNT} from './mutation-types';

methods: {
			handleCount(){
				 this.$store.commit(CHANGECOUNT, 5)//提交一個名為changeCount的mutation,第二個可選引數表示載荷，也可以是一個物件傳入，也可以將type和載荷寫成一個物件傳入{type: 'changeCount', payload: 5}
				 console.log(this.count)

			}
		}