vue 腳手架安裝，這裡我就不介紹了 說重點 !

安裝 vuex

npm install vuex --save

安裝成功後 ，現在我們就可以使用 vuex 了

1： 先在src 目錄下建立 store 資料夾 ， 檔案目錄如圖：

這裡我先介紹下 每個檔案的用處：

1 ： index.js 這裡是個入口檔案

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from
 
 './store'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations
})

把我們需要的檔案 都引入裡面 ，注入並匯出！

2 : store.js 檔案 ，這是我們初始化資料的 ，也是之後我們存資料的地方，這裡我先初始化一個 review 空的物件 ！

const state = {
  review: {}
}

export default state;

3：mutation-types.js 這裡是我們存常量的 ，方便我們之後在 mutations 裡面呼叫 !

export const SET_REVIEW = "SET_REVIEW"

4：getters.js 這個你可以看著是個 vue 的計算屬性：

export const review = state => state.review

5：mutations.js ， 提交 mutations 是更改 vuex中 store 中狀態的 唯一方法

import * as types from './mutation-types'
const mutations = {
  [types.SET_REVIEW](state, review
 
) {
    console.log("review", review)
    state.review = review
  },
}

export default mutations

6：action.js , Action 類似於 mutation，不同在於：Action 提交的是 mutation，而不是直接變更狀態。 Action 可以包含任意非同步操作。
簡單的說 ： 它是 操作 mutations 的 ，現實非同步操作！
這裡我是獲取資料，暫時用不到 action.js

程式碼比較簡單，我就直接貼了：
index.vue 首頁：

<!--  -->
<template>
  <div>
      <span @click="linkTo()">連結跳轉</span>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },

  mounted() {
    this.getReviewData();
  },

  methods: {
    getReviewData() {
      let _this = this;
      _this.$http
        .get("api/review/needlist")
        .then(function(response) {
          console.log(response.data);
          if (response.data.code === 0) {
            let list = response.data.list;
            _this.setReview(list);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    linkTo(){
        this.$router.push({path:'review'});
    },

    ...mapMutations({
      setReview: "SET_REVIEW"
    })
  }
};
</script>
<style scoped></style>

這是vue 元件的 基本結構
在 methods 寫個 獲取資料的方法 getReviewData() ！
在 mounted 生命週期裡呼叫獲取資料方法

關鍵：
我們使用 vue 提供的語法糖 ，來把資料存到 store 裡：

引入 vuex 的 mapMutations 方法

import { mapMutations } from "vuex";

在 methods 裡面寫個 setReview ，它類似於 一個方法 ， 和我們呼叫 其他方法完全一致 ：

...mapMutations({
    setReview: "SET_REVIEW"
 })

最後我們把介面獲取的資料 傳入 這個方法中 ， 就完成了 資料 存入 store 裡了 ！

_this.setReview(list);

接下來，我們就可以使用 store 裡面的資料了

下面我們來獲取 store 裡面的資料 ，

新建一個 review.vue 元件
上程式碼 ：

<!--  -->
<template>
  <div class="web">
    <ul>
      <li v-for="(item,index) in review" :key="index">
        <span>{{item.content}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  components: {
},

  data () {
    return {
    };
  },

computed:{
   ...mapGetters([
     'review'
  ])
},
mounted() {
    console.log(this.review);
},
 methods: {}
}

</script>
<style scoped></style>

獲取資料 我們要引入 ：

import {mapGetters} from 'vuex'

在 computed 生命週期裡拿值
最後我們就可以渲染到頁面了 ！

最後上圖 ：

這裡我們就可以在另一個頁面 拿到資料了了 。

最後我們來說下 ： vuex 重新整理 資料丟失問題 ；
這裡我們用到了 localStorage 本地儲存 。
我們可以在 vue 元件裡屬於 ， 在存資料的時候 同時也存到 localStorage 裡面 。 在需要的地方 在從 localStorage 獲取 ！

這裡我把 localStorage 放到 vuex 裡面 ， 不用在每個元件 都存一遍
我們再 mutations.js 裡面存資料

localStorage.setItem('review', JSON.stringify(state.review));

在store.js 裡面 加入以下程式碼 ：

//防止頁面重新整理vuex中的資料丟失
for (var item in state) {
  localStorage.getItem(item) ? state[item] = JSON.parse(localStorage.getItem(item)) : false;
}

這裡就解決了 我們vuex 重新整理資料 丟失的問題了 ！