"dependencies": {
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.0"
 },

import Vue from 'vue'
import App from './App'
import router from './router'
// 全局加入vuex
import Vuex from 'vuex'
//通過(guò)Vue.use()來(lái)使用這個(gè)Vuex
Vue.use(Vuex)
// 引入我們分離出來(lái)的vuex文件
import {store} from './store/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件;這里可以簡(jiǎn)寫(xiě)成一個(gè)store
 store:store,//所有的組件對(duì)象都多了一個(gè)屬性：$store
 router,
 components: { App },
 template: '<App/>'
})

// 在分離出來(lái)的vuex文件中安裝 Vuex 
import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
export const store = new Vuex.Store({ 
  state: { // 把頁(yè)面顯示數(shù)據(jù)寫(xiě)在store.js文件 
    goodsList: [ 
      { name: '贛州橙子', price: '8.8' }, 
      { name: '新疆哈密瓜', price: '2.0' }, 
      { name: '山東大棗', price: '3.2' }, 
      { name: '陽(yáng)澄湖大閘蟹', price: '10.0' } 
    ] 
  } 
})

<template>
  <div>
    <h2>我是第一個(gè)頁(yè)面</h2><br>
    <router-link to='/page4'>查看第二個(gè)頁(yè)面</router-link>
    <ul class="ul_list">
      <li v-for="item in list">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價(jià)格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      // 直接作為data()中屬性值使用
      list: this.$store.state.goodsList,
    }
   },
   mounted() {
    //  通過(guò)鉤子函數(shù)使用
    //  this.list = this.$store.state.goodsList
   },
  //  計(jì)算屬性
   computed: {
    list() { // 獲取store中的數(shù)據(jù)
      return this.$store.state.goodsList;
    }
   },
  }
</script>