一個簡單的例子

在vue專案中使用vuex

首先需要先了解vuex中的store，然後在store中又有state，getter，action，mutation這幾個引數。

如何安裝vuex，請檢視vue官網安裝vuex

下面演示一個簡單的使用vuex的例項。

首先在state中，定義一個引數：

const state = {
    id: null,
}

我們按照習慣來寫，新建一個mutation-type.js檔案，裡面存放，

export const SAVE_ID = 'SAVE_ID'

在mutaions中，定義方法：

import {RECORD_ADDRESS,} from './mutation-types.js'

[SAVE_ID](state, id) {
	  state.id = id;
},
 

現在就是儲存store中的id值了

在需要的地方使用mapMutations輔助函式，對映為store.commit呼叫。
在這裡需要注意一點，需要從vuex中引入這個輔助函式。

import {mapMutations} from 'vuex'

methods: {
    ...mapMutations([
        'SAVE_ID',
    ]),##這個函式建議放在methods中
}

然後在方法中呼叫，即可儲存：

this.SAVE_PAPERID(this.id);

這時候已經可以使用$store.state.id，獲取到id的值了，但是我又發現了一個問題，當頁面重新整理的時候，store中的值就消失了，這時查到解決方法。

將資料存放到localStorage中。

只需要在mutation中加入：

	[SAVE_ID](state, id) {
	  state.id = id;
	  window.localStorage.setItem('SAVE_ID', state.id);
    },

在獲取資料的時候在加入一個判斷：

computed: {
    id() {
    let localData = window.localStorage.getItem('SAVE_ID');
    if(this.$store.state.id==null && localData) {
      this.SAVE_ID(localData);
    }
    return this.$store.state.id;
  }
}
 

完成

參考部落格：

https://vuex.vuejs.org/zh/guide/

https://blog.csdn.net/yiweichenji/article/details/80239511