腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue學(xué)習(xí)之Vuex的使用詳解

更新時(shí)間：2022年01月22日 14:53:39 作者：IT利刃出鞘

這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點(diǎn)、使用場景和示例展開詳細(xì)的說明，感興趣的小伙伴可以跟隨小編一起了解一下

簡介

說明

本文介紹Vue的插件：Vuex。包括：優(yōu)缺點(diǎn)、使用場景、示例。

官網(wǎng)

官網(wǎng)文檔

API vuex-store

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1.響應(yīng)式

屬于 vue 生態(tài)一環(huán),，能夠觸發(fā)響應(yīng)式的渲染頁面更新。 (localStorage 就不會)

2.可預(yù)測的方式改變數(shù)據(jù)

避免數(shù)據(jù)污染

3.無需轉(zhuǎn)換數(shù)據(jù)

JS 原生的數(shù)據(jù)對象寫法（不需要做轉(zhuǎn)換）。（localStorage 需要做轉(zhuǎn)換）

缺點(diǎn)

1.復(fù)雜

適合大應(yīng)用，不適合小型應(yīng)用

2.不能持久化（刷新頁面后vuex中的state會變?yōu)槌跏紶顟B(tài)）

解決方案

結(jié)合localStorage

vuex-persistedstate插件

使用場景

當(dāng)我們多個(gè)頁面需要共享數(shù)據(jù)時(shí)就可以使用Vuex。

實(shí)際開發(fā)中我們一般在下面這種情況使用它：

當(dāng)前登錄用戶的信息

購物車的信息

收藏的信息

用戶的地理位置

示例

本處用計(jì)數(shù)器來測試：一個(gè)組件修改計(jì)數(shù)器的值，其余兩個(gè)不相關(guān)組件可以監(jiān)測到時(shí)計(jì)數(shù)器值的改變。

做法：一個(gè)組件(ComponentA）將數(shù)據(jù)共享給另外兩個(gè)不相關(guān)組件（ComponentB和ComponentC），外部用Parent.vue放置這三個(gè)組件。

安裝Vuex并引入

1.安裝vuex

在工程目錄下執(zhí)行：npm install vuex

2.編寫vuex的store

創(chuàng)建目錄store，在其下邊創(chuàng)建CounterStore.js，內(nèi)容如下：

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
const couterStore = new Vuex.Store(
  {
    state: {
      count1: 0,
      count2: 0,
    },
    mutations: {
      increment1(state) {
        state.count1++;
      },
      decrement1(state) {
        state.count1--;
      },
      increment2: state => state.count2++,
      decrement2: state => state.count2--,
    }
  }
);
 
export default couterStore;

3.main.js引入CounterStore.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import CouterStore from './store/CounterStore'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store: CouterStore,
  components: { App },
  template: '<App/>'
})

按照J(rèn)S語法，key與value重名時(shí)可以簡寫：（很多教程這么寫）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/CounterStore'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

業(yè)務(wù)代碼

代碼

ComponentA.vue

<template>
  <div class="container">
    <h3>ComponentA</h3>
    <button @click="increment1">增加：第1個(gè)計(jì)數(shù)器</button>
    <button @click="decrement1">減少：第1個(gè)計(jì)數(shù)器</button><br><br>
    <button @click="increment2">增加：第2個(gè)計(jì)數(shù)器</button>
    <button @click="decrement2">減少：第2個(gè)計(jì)數(shù)器</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count1: 0,
      count2: 0,
    }
  },
  methods:{
    increment1() {
      this.$store.commit('increment1')
    },
    decrement1() {
      this.$store.commit('decrement1')
    },
    increment2() {
      this.$store.commit('increment2')
    },
    decrement2() {
      this.$store.commit('decrement2')
    }
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

ComponentB.vue

<template>
  <div class="container">
    <h3>ComponentB</h3>
    計(jì)數(shù)器的值：{{msg}}
    <!--也可以這么寫：-->
    <!--計(jì)數(shù)器的值：{{this.$store.state.count1}}-->
  </div>
</template>
 
<script>
export default {
  computed:{
    msg() {
      return this.$store.state.count1;
    }
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

ComponentC.vue

<template>
  <div class="container">
    <h3>ComponentC</h3>
    計(jì)數(shù)器的值：{{msg}}
    <!--也可以這么寫：-->
    <!--計(jì)數(shù)器的值：{{this.$store.state.count2}}-->
  </div>
</template>
 
<script>
export default {
  computed:{
    msg() {
      return this.$store.state.count2;
    }
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

Parent.vue

<template>
  <div class="outer">
    <h3>父組件</h3>
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
 
  </div>
</template>
 
<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";
 
export default {
  name: 'Parent',
  components: {ComponentA, ComponentB, ComponentC},
  data() {
    return {
      name: 'Tony',
      age: 20,
      phoneNumber: '1234567890'
    }
  }
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

路由

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})