使用vuex中的store存儲數據

Vuex是一個專門為Vue.js應用程序開發的狀態管理模式，這個狀態自管理應用包括三個模式

• state 驅動應用的數據源
• view 以聲明方式將state映射到視圖
• actions 響應在view上的用戶輸入導致的狀態變化

在store/index.js中創建store實例對象，並在里面配置state對象，例如

注意：可以自己手動創建store/index.js文件，並在main中及時導入引入，也可以在創建VUE項目時直接安裝vuex

在vue文件中使用store中存儲的數據，以下三種方法

• 直接在.vue文件中使用

<template>
 <div>
  {{$store.state.a}}
 </div>
</template>

 

• 通過計算函數computed()

 

<template>
 2   <div id="app">
 3     {{getdata.obj1}}
 4     <router-view></router-view>
 5   </div>
 6 </template>
 7 <script>
     export default {
 8   data(){
 9     return {}
10   },
11   computed: {//computed函數的特點:有一個緩存機制，若后來的代碼依賴計算屬性得出的值，那么后來的計算值將會取自第一次計算得出的值的緩存，避免一個值進行多次計算，影響代碼的執行效率
12     getdata(){
13       return this.$store.state
14     }
15   },
16 }

<script>

 

 

• 通過mapState()輔助函數使用

 

<template>
  <div id="app">
    {{a}}-{{obj1}}-{{arr1}}
    <router-view></router-view>
  </div>
</template>
<script>

export default {
  data(){
    return {} }, ...mapState(['a','obj1','arr1'])//擴展運算符 }, }

</script>