Vuex拿到state中數(shù)據(jù)的3種方式與實(shí)例剖析

更新時(shí)間：2022年09月23日 08:57:05 作者：獅子座的男孩

store是一個(gè)狀態(tài)管理工具(vueX中只有唯一一個(gè)store),下面這篇文章主要給大家介紹了關(guān)于Vuex拿到state中數(shù)據(jù)的3種方式與實(shí)例剖析的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Ⅰ、Vuex 簡介：

1、Vuex 是什么？

答：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式；

而所謂狀態(tài)就是指：組件中所維護(hù)的數(shù)據(jù));

(簡而言之：就是狀態(tài)管理，解決復(fù)雜組件數(shù)據(jù)通信，狀態(tài)共享；)

2、Vuex 的圖例講解：

其一、對(duì) Vue Components 的理解:

Vue Components 是指：一個(gè)組件(如：compA.vue);

其二、對(duì) State 的理解:

State 是指：存放數(shù)據(jù)的(數(shù)據(jù)最終是展示(render)在組件的模板(視圖)中);

其三、對(duì) Mutations 的理解:

Mutations 是指：用來存放修改方法的(且是同步的)；

且 Vue Components 可以通過 commit 來修改 Mutations；

其四、對(duì) Actions 的理解：

Actions 是指：用來放異步操作的(如：ajax 請求);

且 Vue Components 可以通過 dispatch 派發(fā) Action 的異步請求；

同時(shí)： Action 可以直接獲取接口: Backend API，或通過 Commit 來修改 Mutations 從而修改 State 數(shù)據(jù);

3、Vuex 的配置過程：

其一、選擇并下載 Vuex 版本的過程中：

注意：Vue2 是與 Vuex3相匹配的，而 Vue3 是與 Vuex4 相匹配的；

其二、打開終端并輸入命令：

npm i vuex@3

Ⅱ、如何引入并使用 Vuex :

1、用 vue-cli 創(chuàng)建項(xiàng)目；

2、在 src 下建一個(gè) store 文件夾并創(chuàng)建 index.js 文件；

其一、建成的文件夾如下所示：

其二、index.js 里面引入的 vuex 的代碼為：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  // 注意：一定要用 Vue.use() 注冊一下；
 
const store = new Vuex.Store({   /* 此時(shí)的 Vuex.Store 就是一個(gè)構(gòu)造函數(shù)(即：相當(dāng)于一個(gè)實(shí)例); */
  // 定義狀態(tài)的地方;
  state: {
    num: 1,
    school: {
        name: 'xuexiqianduan',
        age: 26
    }
  },
})

export default store
// 此時(shí)是導(dǎo)出 store 文件，便于掛載；

3、要在 main.js 文件中掛載一下:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store, /* 掛載到實(shí)例完成后，在 vue 項(xiàng)目的任何地方就都可以使用 store */
  render: h => h(App),
}).$mount('#app')

4、然后在 App.vue 中使用；

Ⅲ、實(shí)例剖析在 App.vue 中使用 state 的過程：

1、方式一：通過 $store.state.num 拿到數(shù)據(jù)；

其一、此時(shí)的 App.vue 的代碼為：

<template>
  <div id="app">
    <h1>真實(shí)用法：展示Vuex中的State</h1>
    <p>方式一: num: {{ $store.state.num }}</p>
     <!-- '$store'就是指：拿到已經(jīng)掛載到實(shí)例上的 store 下的 index.js 的內(nèi)容； -->
  </div>
</template>
<script>
export default {
  computed: {
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、頁面的展示效果為：

其三、而此時(shí) index.js 中的 num 的值為：

(即：已成功拿到了 index.js 中的 num 值;)

2、方式二：通過 {{ num }} 拿到數(shù)據(jù)；

其一、此時(shí)的 App.vue 的代碼為：

<template>
  <div id="app">
    <h1>真實(shí)用法：展示Vuex中的State</h1>
    <p>方式二: num: {{ num }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    num() {
      return this.$store.state.num;
    },
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、頁面的展示效果為：

其三、而此時(shí) index.js 中的 num 的值為：

(即：已成功拿到了 index.js 中的 num 值;)

3、方式三：通過 {{ num }} {{school.name}} 拿到數(shù)據(jù)；

其一、此時(shí)的 App.vue 的代碼為：

<template>
  <div id="app">
    <h1>真實(shí)用法：展示Vuex中的State</h1>
    <p>方式三：num: {{ num }}  school: {{ school.name }}</p>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['num','school']),
    // 該函數(shù)內(nèi)部運(yùn)行的返回值大致為：{num: () => this.$store.state.num, school: () => this.$store.state.school} 
  }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、頁面的展示效果為：