//index//
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' 
import * as actions from './actions'
import * as mutations from './mutations'
Vue.use(Vuex)
const state = {
  username: '123' 
}
const store = new Vuex.Store({
  state,   
  getters, 
  actions, 
  mutations
})
export default store  

//actions文件
// 給action注冊(cè)事件處理函數(shù)。當(dāng)這個(gè)函數(shù)被觸發(fā)時(shí)候，將狀態(tài)提交到mutations中處理
export function modifyAName({commit}, name) { // commit 提交；name即為點(diǎn)擊后傳遞過來的參
    return commit ('modifyAName', name)
}
 
// ES6精簡(jiǎn)寫法
//export const modifyAName = ({commit},name) => commit('modifyAName', name)
//motations文件
// 提交 mutations是更改Vuex狀態(tài)的唯一合法方法
export const modifyAName = (state, name) => { // A組件點(diǎn)擊更改餐館名稱為 A餐館
  state.resturantName = name // 把方法傳遞過來的參數(shù)，賦值給state中的resturantName
}
 //getters文件
// 獲取最終的狀態(tài)信息
export const resturantName = state => state.resturantName
//組件A/methods函數(shù)
sub(){
      let log = document.querySelector("#log").value;
      let reg = document.querySelector("#reg").value;
      userapi("/users/userpsw",{name:log,psw:reg}, (mes) => {
        if(mes === 1){
          console.log(log)
          
          this.$store.commit("modifyAName",log)
          // 賬戶名稱    
          console.log(this.$store.getters.resturantName)
          document.querySelector(".text").innerHTML = "登錄成功"
          this.$router.push({ path: '/my' })
        }else{
          document.querySelector(".text").innerHTML = "登錄失敗"
        }
      })
    },
組件B/computed
 computed:{
      username(){//調(diào)用username即可   {{username}}
         return  this.$store.getters.resturantName
      }
  },

npm install vuex --save

import Vuex from 'vuex'
Vue.use(Vuex)
//賦值給一個(gè)變量，然后引入
let store = new Vuex.Store({
    ...
})
//為了更好的維護(hù)，且體現(xiàn)模塊化，可以寫在別的js文件中，然后導(dǎo)入
import store from './store'     //創(chuàng)建一個(gè)store文件夾，默認(rèn)為文件夾下的index.js文件
new Vue({
  ...
  store,   
  ...
})

new Vuex.Store({
  //狀態(tài)
  state: {
    count: 100
  },
  //將狀態(tài)裝飾，或刷選，以想要的結(jié)果輸出
  getters: {
    hasUnit () {
      return this.state.count.filter(count => count + 1)
    }
  },
  //可以理解為變更狀態(tài)的方法，第一個(gè)參數(shù)為state，可以再添加自定義參數(shù)，注意：只能進(jìn)行同步
  mutations: {
    increment (state) {
      state.count++
    }
  },
  //可控制的提交mutation事件，彌補(bǔ)mutation無法異步
  actions: {
    increment (state) {
      setTimeout(() =>
        state.commit('increment'), 30)
    }
  }
})

 computed: {
    count () {
      return this.$store.state.count
    }，
    hasUnit () {
      return this.$store.getters.hasUnit 
    }
  }

methods: {
    add () {
      this.$store.commit('increment')    // mutations使用commit調(diào)用
    },
    asyncAdd () {
      this.$store.dispatch('increment')  // actions使用dispatch調(diào)用
    }
  }

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
//導(dǎo)入多個(gè)：ES6模塊
import { mapState, mapGetters } from 'vuex'

  computed: {
    ...mapState([
      'count'
    ]),
    ...mapGetters([
      'addUnit'
    ])
  }
//使用this.count, this.addUnit

methods: {
    ...mapMutations([
       'increment'
    ]),
    ...mapActions({
       addNum: 'increment'
    })
    add () {
       this.increment()
    }
}
//可以被當(dāng)做事件調(diào)用,為了避免命名沖突，可以使用重命名，需要使用{}而不是[]

//局部模塊引用的第一個(gè)參數(shù)state都是自己模塊里的
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

const state = {
  count: 1
};
const getters = {
  get(state) {
    return state.count;
  }
};
const mutations = {
  add(state) {
    state.count++;
  },
  reduce(state) {
    state.count--;
  }
};
const actions = {
  add: ({ commit }) => {
    commit("add");
  },
  reduce: ({ commit }) => {
    commit("reduce");
  }
};
export default {
  namespaced: true,  // 使該模塊帶有命名空間，使它在命名上會(huì)按路徑進(jìn)行命名  如moduleA/state
  state,
  getters,
  mutations,
  actions
};

computed: {
  ...mapState({
    count: state => state.moduleA.count
  }),
  ...mapGetters({
    get: "moduleB/get"
  })
}

methods: {
  ...mapMutations(
    'moduleA', {addA:'add', reduceB:'reduce'}    // 重命名就用對(duì)象包裹
  ),
  ...mapActions(
    'moduleA', ['add', 'reduce']
  )
}

const moduleA = {
  // ...
  getters: {
    addUnit (state, getters, rootState) {    //rootState為根下的狀態(tài)
      return state.count + rootState.count
    }
  }
}