快捷導(dǎo)航

Vuex中的State使用介紹

更新時間：2019年01月19日 09:08:19 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于Vuex中的State使用介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

現(xiàn)在在上一篇為什么要使用Vuex的介紹理解基礎(chǔ)上使用Vuex中的State，一個正面例子來證實，同時也介紹一下Vue核心概念State。

Vuex 使用單一狀態(tài)樹——是的，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。至此它便作為一個“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。

單狀態(tài)樹和模塊化并不沖突——在后面的章節(jié)里我們會討論如何將狀態(tài)和狀態(tài)變更事件分布到各個子模塊中。

Vuex的使用

引入Vuex

方式一（推薦使用）：

首先我們在 vue.js 2.0+ 開發(fā)環(huán)境中安裝 vuex :

npm install vuex --save

方式二：

1.在package.json中的dependencies字段加入："vuex": "^3.0.0"后：

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

2.終端cd到項目目錄然后執(zhí)行:npm install安裝即可。然后在運(yùn)行項目

使用Vuex

1.在 src/main.js全局中加入 :

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

2.在src目錄下新建store文件夾；在該文件夾下新建store.js文件。store.js中代碼如下：

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

3.獲取數(shù)據(jù)。

由于 Vuex 的狀態(tài)存儲是響應(yīng)式的，從 store 實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)或直接使用$store.state.屬性名獲取vuex中的數(shù)據(jù)。通過在根實例中注冊 store 選項，該 $store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。

page3.vue和page4.vue代碼：

page3.vue

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

組件仍然保有局部狀態(tài)

使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個組件，最好還是作為組件的局部狀態(tài)。你應(yīng)該根據(jù)你的應(yīng)用開發(fā)需要進(jìn)行權(quán)衡和確定。

效果