vue init webpack-simple vuex-demo
cd vuex-demo
npm install

npm install vuex -S

import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)

import Vue from 'vue'
import App from './App.vue'
import store from './assets/store' //導(dǎo)入 store 對(duì)象

new Vue({
 //配置 store 選項(xiàng)，指定為 store 對(duì)象，會(huì)自動(dòng)將 store 對(duì)象注入到所有子組件中，在子組件中通過(guò) this.$store 訪問(wèn)該 store 對(duì)象 
 store, 
 el: '#app',
 render: h => h(App)
})

// 定義屬性（數(shù)據(jù)）
var state = {
 count:6
}
// 創(chuàng)建 store 對(duì)象
const store = new Vuex.Store({
 state
})

// 導(dǎo)出 store 對(duì)象
export default store;

<template>
 <div id="app">
 //把 count 方法直接寫(xiě)入，可自己執(zhí)行
 <h1>{{count}}</h1>
 </div>
</template>

<script>
export default {
 name: 'app',
 computed:{
 count(){
  //返回獲取到的數(shù)據(jù)
  return this.$store.state.count
 }
 }
}
</script>

import {mapGetters} from 'vuex'

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
 //此處的 count 與以下 store.js 文件中 getters 內(nèi)的 count 相對(duì)應(yīng)
 'count'
 ])
}
</script>

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

// 定義屬性（數(shù)據(jù)）
var state = {
 count:6
}
// 定義 getters
var getters={
 //需要傳個(gè)形參，用來(lái)獲取 state 屬性
 count(state){
  return state.count
 }
}
// 創(chuàng)建 store 對(duì)象
const store = new Vuex.Store({
 state,
 getters
})

// 導(dǎo)出 store 對(duì)象
export default store;

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

// 定義屬性（數(shù)據(jù)）
var state = {
 count:6
}

// 定義 getters
var getters={
 count(state){
  return state.count
 }
}

// 定義 actions ，要執(zhí)行的動(dòng)作，如流程的判斷、異步請(qǐng)求
const actions ={
 // ({commit,state}) 這種寫(xiě)法是 es6 中的對(duì)象解構(gòu)
 increment({commit,state}){
  //提交一個(gè)名為 increment 的變化，名字可自定義，可以認(rèn)為是類(lèi)型名，與下方 mutations 中的 increment 對(duì)應(yīng)
  //commit 提交變化，修改數(shù)據(jù)的唯一方式就是顯式的提交 mutations
  commit('increment') 
 }
}

// 定義 mutations ，處理狀態(tài)（數(shù)據(jù)） 的改變
const mutations ={
 //與上方 commit 中的 ‘increment' 相對(duì)應(yīng)
 increment(state){
  state.count ++;
 }
}
// 創(chuàng)建 store 對(duì)象
const store = new Vuex.Store({
 state,
 getters,
 actions,
 mutations
})

// 導(dǎo)出 store 對(duì)象
export default store;

import {mapGetters,mapActions} from 'vuex'

<template>
 <div id="app">
 //這個(gè) increment 方法與下面 methods 中的 increment 相對(duì)應(yīng)
 <button @click="increment">增加</button>
 <button>減少</button>
 <h1>{{count}}</h1>
 </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
 'count'
 ]),
 methods:mapActions([
 //該 increment 來(lái)自 store.js 中導(dǎo)出的 actions 和 mutations 中的 increment 
 'increment',
 ])
}
</script>