const sourceOfTruth = {}
const vmA = new Vue({
 data: sourceOfTruth
})
const vmB = new Vue({
 data: sourceOfTruth
})

var store = {
 debug: true,
 state: {
  message: 'Hello!'
 },
 setMessageAction (newValue) {
  if (this.debug) console.log('setMessageAction triggered with', newValue)
  this.state.message = newValue
 },
 clearMessageAction () {
  if (this.debug) console.log('clearMessageAction triggered')
  this.state.message = ''
 }
}

var vmA = new Vue({
 data: {
  privateState: {},
  sharedState: store.state
 }
})
var vmB = new Vue({
 data: {
  privateState: {},
  sharedState: store.state
 }
})

new Vue({
 el: '#app',
 // state
 data () {
  return {
   count: 0
  }
 },
 // view
 template: `
 <div>
  <span>{{count}}</span>
  <input type="button" value="+" @click="increment">
 </div>
 `,
 // actions
 methods: {
  increment () {
   this.count++
  }
 }
})

npm install vuex --save

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

// 如果在模塊化構(gòu)建系統(tǒng)中，請(qǐng)確保在開頭調(diào)用了 Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 }
})

store.commit('increment')
console.log(store.state.count) // -> 1

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment: state => state.count++,
  decrement: state => state.count--,
 }
})
new Vue({
 el: '#app',
 computed: {
  count () {
   return store.state.count
  }
 },
 // view
 template: `
 <div>
  <input type="button" value="-" @click="decrement">
  <span>{{count}}</span>
  <input type="button" value="+" @click="increment">
 </div>
 `,
 // actions
 methods: {
  increment () {
   store.commit('increment')
  },
  decrement () {
   store.commit('decrement')
  },  
 }
})

// 創(chuàng)建一個(gè) Counter 組件
const Counter = {
 template: `<div>{{ count }}</div>`,
 computed: {
  count () {
   return store.state.count
  }
 }
}

const app = new Vue({
 el: '#app',
 // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件
 store,
 components: { Counter },
 template: `
  <div class="app">
   <counter></counter>
  </div>
 `
})

const Counter = {
 template: `<div>{{ count }}</div>`,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
 // ...
 computed: mapState({
  // 箭頭函數(shù)可使代碼更簡練
  count: state => state.count,
  // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
  countAlias: 'count',
  // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
  countPlusLocalState (state) {
   return state.count + this.localCount
  }
 })
}

computed: mapState([
 // 映射 this.count 為 store.state.count
 'count'
])

computed: {
 localComputed () { /* ... */ },
 // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
 ...mapState({
  // ...
 })
}

computed: {
 doneTodosCount () {
  return this.$store.state.todos.filter(todo => todo.done).length
 }
}

const store = new Vuex.Store({
 state: {
  todos: [
   { id: 1, text: '...', done: true },
   { id: 2, text: '...', done: false }
  ]
 },
 getters: {
  doneTodos: state => {
   return state.todos.filter(todo => todo.done)
  }
 }
})

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getters: {
 // ...
 doneTodosCount: (state, getters) => {
  return getters.doneTodos.length
 }
}
store.getters.doneTodosCount // -> 1

computed: {
 doneTodosCount () {
  return this.$store.getters.doneTodosCount
 }
}

getters: {
 // ...
 getTodoById: (state, getters) => (id) => {
  return state.todos.find(todo => todo.id === id)
 }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

var getTodoById = function(state,getters){
 return function(id){
  return state.todos.find(function(todo){
   return todo.id === id
  })
 }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

import { mapGetters } from 'vuex'
export default {
 // ...
 computed: {
 // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
  ...mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])
 }
}

mapGetters({
 // 映射 `this.doneCount` 為 `store.getters.doneTodosCount`
 doneCount: 'doneTodosCount'
})

const store = new Vuex.Store({
 state: {
  count: 1
 },
 mutations: {
  increment (state) {
   // 變更狀態(tài)
   state.count++
  }
 }
})

store.commit('increment')

// ...
mutations: {
 increment (state, n) {
  state.count += n
 }
}
store.commit('increment', 10)

// ...
mutations: {
 increment (state, payload) {
  state.count += payload.amount
 }
}
store.commit('increment', {
 amount: 10
})

store.commit({
 type: 'increment',
 amount: 10
})

mutations: {
 increment (state, payload) {
  state.count += payload.amount
 }
}

state.obj = { ...state.obj, newProp: 123 }

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
 state: { ... },
 mutations: {
  // 可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名
  [SOME_MUTATION] (state) {
   // mutate state
  }
 }
})

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

import { mapMutations } from 'vuex'
export default {
 // ...
 methods: {
  ...mapMutations([
   'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
   // `mapMutations` 也支持載荷：
   'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
  ]),
  ...mapMutations({
   add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
  })
 }
}

store.commit('increment')
// 任何由 "increment" 導(dǎo)致的狀態(tài)變更都應(yīng)該在此刻完成。

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 },
 actions: {
  increment (context) {
   context.commit('increment')
  }
 }
})

actions: {
 increment ({ commit }) {
  commit('increment')
 }
}

store.dispatch('increment')

actions: {
 incrementAsync ({ commit }) {
  setTimeout(() => {
   commit('increment')
  }, 1000)
 }
}

// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
 amount: 10
})
// 以對(duì)象形式分發(fā)
store.dispatch({
 type: 'incrementAsync',
 amount: 10
})

actions: {
 checkout ({ commit, state }, products) {
  // 把當(dāng)前購物車的物品備份起來
  const savedCartItems = [...state.cart.added]
  // 發(fā)出結(jié)賬請(qǐng)求，然后樂觀地清空購物車
  commit(types.CHECKOUT_REQUEST)
  // 購物 API 接受一個(gè)成功回調(diào)和一個(gè)失敗回調(diào)
  shop.buyProducts(
   products,
   // 成功操作
   () => commit(types.CHECKOUT_SUCCESS),
   // 失敗操作
   () => commit(types.CHECKOUT_FAILURE, savedCartItems)
  )
 }
}

import { mapActions } from 'vuex'
export default {
 // ...
 methods: {
  ...mapActions([
   'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
   // `mapActions` 也支持載荷：
   'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
  ]),
  ...mapActions({
   add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
  })
 }
}

actions: {
 actionA ({ commit }) {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    commit('someMutation')
    resolve()
   }, 1000)
  })
 }
}

store.dispatch('actionA').then(() => {
 // ...
})

actions: {
 // ...
 actionB ({ dispatch, commit }) {
  return dispatch('actionA').then(() => {
   commit('someOtherMutation')
  })
 }
}

// 假設(shè) getData() 和 getOtherData() 返回的是 Promise
actions: {
 async actionA ({ commit }) {
  commit('gotData', await getData())
 },
 async actionB ({ dispatch, commit }) {
  await dispatch('actionA') // 等待 actionA 完成
  commit('gotOtherData', await getOtherData())
 }
}

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
 }
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

const moduleA = {
 state: { count: 0 },
 mutations: {
  increment (state) {
   // 這里的 `state` 對(duì)象是模塊的局部狀態(tài)
   state.count++
  }
 },
 getters: {
  doubleCount (state) {
   return state.count * 2
  }
 }
}

const moduleA = {
 // ...
 actions: {
  incrementIfOddOnRootSum ({ state, commit, rootState }) {
   if ((state.count + rootState.count) % 2 === 1) {
    commit('increment')
   }
  }
 }
}

const moduleA = {
 // ...
 getters: {
  sumWithRootCount (state, getters, rootState) {
   return state.count + rootState.count
  }
 }
}

const store = new Vuex.Store({
 modules: {
  account: {
   namespaced: true,
   // 模塊內(nèi)容（module assets）
   state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
   getters: {
    isAdmin () { ... } // -> getters['account/isAdmin']
   },
   actions: {
    login () { ... } // -> dispatch('account/login')
   },
   mutations: {
    login () { ... } // -> commit('account/login')
   },
   // 嵌套模塊
   modules: {
    // 繼承父模塊的命名空間
    myPage: {
     state: { ... },
     getters: {
      profile () { ... } // -> getters['account/profile']
     }
    },
    // 進(jìn)一步嵌套命名空間
    posts: {
     namespaced: true,
     state: { ... },
     getters: {
      popular () { ... } // -> getters['account/posts/popular']
     }
    }
   }
  }
 }
})

modules: {
 foo: {
  namespaced: true,
  getters: {
   // 在這個(gè)模塊的 getter 中，`getters` 被局部化了
   // 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters`
   someGetter (state, getters, rootState, rootGetters) {
    getters.someOtherGetter // -> 'foo/someOtherGetter'
    rootGetters.someOtherGetter // -> 'someOtherGetter'
   },
   someOtherGetter: state => { ... }
  },
  actions: {
   // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了
   // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
   someAction ({ dispatch, commit, getters, rootGetters }) {
    getters.someGetter // -> 'foo/someGetter'
    rootGetters.someGetter // -> 'someGetter'
    dispatch('someOtherAction') // -> 'foo/someOtherAction'
    dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
    commit('someMutation') // -> 'foo/someMutation'
    commit('someMutation', null, { root: true }) // -> 'someMutation'
   },
   someOtherAction (ctx, payload) { ... }
  }
 }
}

computed: {
 ...mapState({
  a: state => state.some.nested.module.a,
  b: state => state.some.nested.module.b
 })
},
methods: {
 ...mapActions([
  'some/nested/module/foo',
  'some/nested/module/bar'
 ])
}

computed: {
 ...mapState('some/nested/module', {
  a: state => state.a,
  b: state => state.b
 })
},
methods: {
 ...mapActions('some/nested/module', [
  'foo',
  'bar'
 ])
}

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
 computed: {
  // 在 `some/nested/module` 中查找
  ...mapState({
   a: state => state.a,
   b: state => state.b
  })
 },
 methods: {
  // 在 `some/nested/module` 中查找
  ...mapActions([
   'foo',
   'bar'
  ])
 }
}

// 通過插件的參數(shù)對(duì)象得到空間名稱
// 然后返回 Vuex 插件函數(shù)
export function createPlugin (options = {}) {
 return function (store) {
  // 把空間名字添加到插件模塊的類型（type）中去
  const namespace = options.namespace || ''
  store.dispatch(namespace + 'pluginAction')
 }
}

// 注冊模塊 `myModule`
store.registerModule('myModule', {
 // ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
 // ...
})

const MyReusableModule = {
 state () {
  return {
   foo: 'bar'
  }
 },
 // mutation, action 和 getter 等等...
}

const myPlugin = store => {
 // 當(dāng) store 初始化后調(diào)用
 store.subscribe((mutation, state) => {
  // 每次 mutation 之后調(diào)用
  // mutation 的格式為 { type, payload }
 })
}

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
})

export default function createWebSocketPlugin (socket) {
 return store => {
  socket.on('data', data => {
   store.commit('receiveData', data)
  })
  store.subscribe(mutation => {
   if (mutation.type === 'UPDATE_DATA') {
    socket.emit('update', mutation.payload)
   }
  })
 }
}
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
 state,
 mutations,
 plugins: [plugin]
})

const myPluginWithSnapshot = store => {
 let prevState = _.cloneDeep(store.state)
 store.subscribe((mutation, state) => {
  let nextState = _.cloneDeep(state)
  // 比較 prevState 和 nextState...
  // 保存狀態(tài)，用于下一次 mutation
  prevState = nextState
 })
}

const store = new Vuex.Store({
 // ...
 plugins: process.env.NODE_ENV !== 'production'
  ? [myPluginWithSnapshot]
  : []
})

import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
 plugins: [createLogger()]
})
createLogger 函數(shù)有幾個(gè)配置項(xiàng)：
const logger = createLogger({
 collapsed: false, // 自動(dòng)展開記錄的 mutation
 filter (mutation, stateBefore, stateAfter) {
  // 若 mutation 需要被記錄，就讓它返回 true 即可
  // 順便，`mutation` 是個(gè) { type, payload } 對(duì)象
  return mutation.type !== "aBlacklistedMutation"
 },
 transformer (state) {
  // 在開始記錄之前轉(zhuǎn)換狀態(tài)
  // 例如，只返回指定的子樹
  return state.subTree
 },
 mutationTransformer (mutation) {
  // mutation 按照 { type, payload } 格式記錄
  // 我們可以按任意方式格式化
  return mutation.type
 }
})

const store = new Vuex.Store({
 // ...
 strict: true
})

const store = new Vuex.Store({
 // ...
 strict: process.env.NODE_ENV !== 'production'
})

<input v-model="obj.message">

<input :value="message" @input="updateMessage">
// ...
computed: {
 ...mapState({
  message: state => state.obj.message
 })
},
methods: {
 updateMessage (e) {
  this.$store.commit('updateMessage', e.target.value)
 }
}

// ...
mutations: {
 updateMessage (state, message) {
  state.obj.message = message
 }
}

<input v-model="message">
// ...
computed: {
 message: {
  get () {
   return this.$store.state.obj.message
  },
  set (value) {
   this.$store.commit('updateMessage', value)
  }
 }
}

const state = { ... }
// `mutations` 作為命名輸出對(duì)象
export const mutations = { ... }
export default new Vuex.Store({
 state,
 mutations
})

// mutations.js
export const mutations = {
 increment: state => state.count++
}
// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'
// 解構(gòu) `mutations`
const { increment } = mutations
describe('mutations', () => {
 it('INCREMENT', () => {
  // 模擬狀態(tài)
  const state = { count: 0 }
  // 應(yīng)用 mutation
  increment(state)
  // 斷言結(jié)果
  expect(state.count).to.equal(1)
 })
})

// actions.js
import shop from '../api/shop'
export const getAllProducts = ({ commit }) => {
 commit('REQUEST_PRODUCTS')
 shop.getProducts(products => {
  commit('RECEIVE_PRODUCTS', products)
 })
}
// actions.spec.js
// 使用 require 語法處理內(nèi)聯(lián) loaders。
// inject-loader 返回一個(gè)允許我們注入 mock 依賴的模塊工廠
import { expect } from 'chai'
const actionsInjector = require('inject-loader!./actions')
// 使用 mocks 創(chuàng)建模塊
const actions = actionsInjector({
 '../api/shop': {
  getProducts (cb) {
   setTimeout(() => {
    cb([ /* mocked response */ ])
   }, 100)
  }
 }
})
// 用指定的 mutaions 測試 action 的輔助函數(shù)
const testAction = (action, args, state, expectedMutations, done) => {
 let count = 0
 // 模擬提交
 const commit = (type, payload) => {
  const mutation = expectedMutations[count]
  try {
   expect(mutation.type).to.equal(type)
   if (payload) {
    expect(mutation.payload).to.deep.equal(payload)
   }
  } catch (error) {
   done(error)
  }
  count++
  if (count >= expectedMutations.length) {
   done()
  }
 }
 // 用模擬的 store 和參數(shù)調(diào)用 action
 action({ commit, state }, ...args)
 // 檢查是否沒有 mutation 被 dispatch
 if (expectedMutations.length === 0) {
  expect(count).to.equal(0)
  done()
 }
}
describe('actions', () => {
 it('getAllProducts', done => {
  testAction(actions.getAllProducts, [], {}, [
   { type: 'REQUEST_PRODUCTS' },
   { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
  ], done)
 })
})

// getters.js
export const getters = {
 filteredProducts (state, { filterCategory }) {
  return state.products.filter(product => {
   return product.category === filterCategory
  })
 }
}
// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'
describe('getters', () => {
 it('filteredProducts', () => {
  // 模擬狀態(tài)
  const state = {
   products: [
    { id: 1, title: 'Apple', category: 'fruit' },
    { id: 2, title: 'Orange', category: 'fruit' },
    { id: 3, title: 'Carrot', category: 'vegetable' }
   ]
  }
  // 模擬 getter
  const filterCategory = 'fruit'
  // 獲取 getter 的結(jié)果
  const result = getters.filteredProducts(state, { filterCategory })
  // 斷言結(jié)果
  expect(result).to.deep.equal([
   { id: 1, title: 'Apple', category: 'fruit' },
   { id: 2, title: 'Orange', category: 'fruit' }
  ])
 })
})

// webpack.config.js
module.exports = {
 entry: './test.js',
 output: {
  path: __dirname,
  filename: 'test-bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   }
  ]
 }
}

webpack
mocha test-bundle.js

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'
Vue.use(Vuex)
const state = { ... }
const store = new Vuex.Store({
 state,
 mutations,
 modules: {
  a: moduleA
 }
})
if (module.hot) {
 // 使 action 和 mutation 成為可熱重載模塊
 module.hot.accept(['./mutations', './modules/a'], () => {
  // 獲取更新后的模塊
  // 因?yàn)?babel 6 的模塊編譯格式問題，這里需要加上 `.default`
  const newMutations = require('./mutations').default
  const newModuleA = require('./modules/a').default
  // 加載新模塊
  store.hotUpdate({
   mutations: newMutations,
   modules: {
    a: newModuleA
   }
  })
 })