VUEX state 的使用學習二

香吧香發表於2023-01-17
Vue

轉載請註明出處：

　　state 提供唯一的資料資源,所有的共享的資料都要統一放到store 中的state中進行儲存;

　　狀態state用於儲存所有元件的資料。

管理資料

// 初始化vuex物件
const store = new vuex.Store({
  state: {
    // 管理資料
    count: 0
  }
})

第一種訪問方式

this.$store.state.全域性資料名稱

　　在元件獲取state的資料：原始用法插值表示式

<!--原始用法-->
<div>A元件 state的資料：{{$store.state.count}}</div>

<!--使用計算屬性-->
<div>A元件 state的資料：{{count}}</div>

　　使用計算屬性：

// 把state中資料，定義在元件內的計算屬性中
computed: {
  // 1. 最完整的寫法
  // count: function () {
  //   return this.$store.state.count
  // },
  // 2. 縮寫
  count () {
    return this.$store.state.count
  }
}
// 不能使用箭頭函式  this指向的不是vue例項

　　注意：

　　　　- state中的資料是自定義的，但是state屬性名是固定的
　　　　- 獲取資料可以透過 $store.state
　　　　- 可以使用計算屬性最佳化模板中獲取資料的方式
　　　　- 計算屬性不可以使用箭頭函式（箭頭函式本身是沒有this的，實際上用的是父級函式中的this）

 第二種方式 mapState:

　　把vuex中的state資料對映到元件的計算屬性中。

　　使用方法：

1.從vuex中按需求匯入mapState函式
import {mapState} from 'vuex'
透過剛才匯入的mapState函式，將當前元件需要的全域性資料，對映為當前元件的computed計算屬性
2. 將全域性資料，對映為當前元件的計算屬性，mapState引數是一個陣列
computed :{ ...mapState(['count']) }

　　使用示例：

<a-input placeholder="請輸入任務" class="my_ipt" :value="inputValue" />

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'app',
  data() {
    return {}
  },
  created() {
  },
  computed: {
    ...mapState(['inputValue']),
  },
}

 

相關文章