npm install vuex -S

在目錄下新建一個資料夾，store 

--------------store   //目錄

-------modules      //放模組的

-------action.js     //暫時空白

-------index.js     //總的檔案（主要的）

-------mutation-type.js   //還沒用到

index.js

import Vue from "vue"
import Vuex from "vuex"
import increment from './mutation-types'
import style from './modules/style'
import globalObject from './modules/globalObject'
import urlObject from './modules/urlObject'

Vue.use(Vuex)
const state = {   //放變數名

}

export default new Vuex.Store({//放模組，state/mutations/actions,等
  modules:{
    style,
    globalObject,
    urlObject
  },
  state,
  mutations:{
    increment (value) {
    }
  }
})



 

index.js寫完記得在目錄下的main.js 新增 store模組

new Vue({
  el: '#app',
  router,
  store,   //在這裡
  components: { App },
  template: '<App/>'
})

在模組裡使用

import {  mapState,  mapActions} from 'vuex'

export default {
computed: {
    ...mapState([
      'style', 'userInfoObject'
    ]),
    ...mapActions([
      'isLoginOut'
    ])
  }
}
變數
在methods的話就這樣用
that.$store.state.urlObject.host
在html直接就{{urlObject}}
方法：
使用的話直接在這個樣子
that.isLoginOut()
如果要傳參的話就這個樣子
that.$store.dispatch("isLoginOut", res.data)
 

modules

globalObject.js

const globalObject = {
stste: {
}
actions: {
}
mutations: {

  }
}
export default globalObject

就這個樣子啦

就是把這個檔案加進去 store/index.js裡面去

Vue的生命週期很重要，最好先去了解清楚