Vuex之store的使用

如果我們需要在不同路由中使用同一個會改變的參數，也就是需要一個全局參數，我們可以通過Vuex的store來實現。

實現方法：

1.在package.json中加入vuex，因為store是Vuex的一個功能。然后執行npm install。

"dependencies": {
  "element-ui": "^2.15.1", "less": "^4.1.1", "less-loader": "^8.1.1", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "3.3.0" }

2.在main.js導入store，並加入到Vue實例中。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.在src文件夾下新增store文件夾，里面包含index.js和modules/userId.js，modules文件夾下的文件為變量名。

4.編輯userId.js代碼如下，即定義一個全局狀態userId，定義其get和set方法。

其中，mutations是改變的意思，即改變狀態的值。

export default {
    state: {
        userId:{}
    },
    getters: {
        getUserId: state => state.userId
    },
    mutations: {
        setUserId(state, userId){
            state.userId = userId
        }
    }
}

5.編輯index.js代碼如下，即引入並使用Vuex，引入userId並在modules中配置。

import Vue from 'vue'
import Vuex from 'vuex'
import userId from './modules/userId'

Vue.use(Vuex)

export default new Vuex.Store({

    state: {
        //這里放全局參數
    },

    mutations: {
        //這里是set方法
    },

    getters: {        
        //這里是get方法   
    },

    actions: {
      
    },

    modules: {
        userId,
        //這里是為了給全局變量分組，所以需要寫提前聲明其他store文件，然后引入這里
    }
})

6.然后我們就可以在需要的地方存取變量了。

存變量的方法為

this.$store.commit('setUserId', 'luoyihao')

取變量的方法為

this.$store.getters.getUserId

7.我們也可以在新建Store（倉庫）時，將state、getters、actions、mutations等文件分別單獨寫成js，在store/index.js中引用。

如下圖所示。

//state.js
let state = {
  count: 1
}
export default state

//mutation.js
// 第一個參數默認接收state對象
let increment = (state) => {
  state.count++
}
let decrement = (state) => {
  state.count--
}
export {increment, decrement}

ps:Vuex和localStorage、全局變量的區別：

Vuex和localStorage的區別是什么呢？

1.最重要的區別：vuex存儲在內存，localStorage則以文件的方式存儲在本地

2.應用場景：vuex用於組件之間的傳值，localStorage則主要用於不同頁面之間的傳值。

3.永久性：當刷新頁面時vuex存儲的值會丟失，localStorage不會。

 

Vuex和全局變量的區別是什么呢？

1.由於使用Vuex需要將store實例掛載到Vue實例中，因此Vue實例可以對Vuex的state數據加監聽，這跟Vue實例data的數據雙向綁定是類似的。

而全局變量由於沒有被“數據劫持”，因此即使全局變量的值發生改變，也無法在Vue實例中監聽到他的變化。

2.Vuex中的狀態值，不能通過賦值的方式(state.xxx = yyy)改變，需要通過mutation觸發變更。這樣做方便狀態管理，而一般的全局變量是支持直接賦值的。