ASCII码 ASCII码

Vue学习之Vuex的使用详解

发布于：2022-01-23 11:49:34  栏目：技术文档

</style>ue学习之Vuex的使用详解

目录简介优缺点优点缺点使用场景示例安装Vuex并引入1.安装vuex2.编写vuex的store3.main.js引入CounterStore.js业务代码测试简介说明

本文介绍Vue的插件：Vuex。包括：优缺点、使用场景、示例。

官网

官网文档

API vuex-store

优缺点优点1.响应式

属于 vue 生态一环,，能够触发响应式的渲染页面更新。 (localStorage 就不会)

2.可预测的方式改变数据

避免数据污染

3.无需转换数据

JS 原生的数据对象写法（不需要做转换）。（localStorage 需要做转换）

缺点1.复杂

适合大应用，不适合小型应用

2.不能持久化（刷新页面后vuex中的state会变为初始状态）

解决方案

结合localStorage

vuex-persistedstate插件

使用场景当我们多个页面需要共享数据时就可以使用Vuex。

实际开发中我们一般在下面这种情况使用它：

当前登录用户的信息

购物车的信息

收藏的信息

用户的地理位置

示例本处用计数器来测试：一个组件修改计数器的值，其余两个不相关组件可以监测到时计数器值的改变。

做法：一个组件(ComponentA）将数据共享给另外两个不相关组件（ComponentB和ComponentC），外部用Parent.vue放置这三个组件。

安装Vuex并引入1.安装vuex在工程目录下执行：npm install vuex

2.编写vuex的store创建目录store，在其下边创建CounterStore.js，内容如下：ue学习之Vuex的使用详解

目录简介优缺点优点缺点使用场景示例安装Vuex并引入1.安装vuex2.编写vuex的store3.main.js引入CounterStore.js业务代码测试简介说明

本文介绍Vue的插件：Vuex。包括：优缺点、使用场景、示例。

官网

官网文档

API vuex-store

优缺点优点1.响应式

属于 vue 生态一环,，能够触发响应式的渲染页面更新。 (localStorage 就不会)

2.可预测的方式改变数据

避免数据污染

3.无需转换数据

JS 原生的数据对象写法（不需要做转换）。（localStorage 需要做转换）

缺点1.复杂

适合大应用，不适合小型应用

2.不能持久化（刷新页面后vuex中的state会变为初始状态）

解决方案

结合localStorage

vuex-persistedstate插件

使用场景当我们多个页面需要共享数据时就可以使用Vuex。

实际开发中我们一般在下面这种情况使用它：

当前登录用户的信息

购物车的信息

收藏的信息

用户的地理位置

示例本处用计数器来测试：一个组件修改计数器的值，其余两个不相关组件可以监测到时计数器值的改变。

做法：一个组件(ComponentA）将数据共享给另外两个不相关组件（ComponentB和ComponentC），外部用Parent.vue放置这三个组件。

安装Vuex并引入1.安装vuex在工程目录下执行：npm install vuex

2.编写vuex的store创建目录store，在其下边创建CounterStore.js，内容如下： import Vue from ‘vue’; import Vuex from ‘vuex’;

  1. Vue.use(Vuex);
  2. const couterStore = new Vuex.Store(
  3.   {
  4.     state: {
  5.       count1: 0,
  6.       count2: 0,
  7.     },
  8.     mutations: {
  9.       increment1(state) {
  10.         state.count1++;
  11.       },
  12.       decrement1(state) {
  13.         state.count1--;
  14.       },
  15.       increment2: state => state.count2++,
  16.       decrement2: state => state.count2--,
  17.     }
  18.   }
  19. );
  21. 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’

  1. Vue.config.productionTip = false
  3. /* eslint-disable no-new */
  4. new Vue({
  5.   el: '#app',
  6.   router,
  7.   store: CouterStore,
  8.   components: { App },
  9.   template: '<App/>'
  10. })

按照JS语法，key与value重名时可以简写：（很多教程这么写） // 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’

  1. Vue.config.productionTip = false
  3. /* eslint-disable no-new */
  4. new Vue({
  5.   el: '#app',
  6.   router,
  7.   store,
  8.   components: { App },
  9.   template: '<App/>'
  10. })

业务代码代码

ComponentA.vue <template> <div class="container"> <h3>ComponentA</h3> <button @click="increment1">增加：第1个计数器</button> <button @click="decrement1">减少：第1个计数器</button><br><br> <button @click="increment2">增加：第2个计数器</button> <button @click="decrement2">减少：第2个计数器</button> </div> </template>

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       count1: 0,
  6.       count2: 0,
  7.     }
  8.   },
  9.   methods:{
  10.     increment1() {
  11.       this.$store.commit('increment1')
  12.     },
  13.     decrement1() {
  14.       this.$store.commit('decrement1')
  15.     },
  16.     increment2() {
  17.       this.$store.commit('increment2')
  18.     },
  19.     decrement2() {
  20.       this.$store.commit('decrement2')
  21.     }
  22.   }
  23. }
  24. </script>
  26. <style scoped>
  27. .container {
  28.   margin: 20px;
  29.   border: 2px solid blue;
  30.   padding: 20px;
  31. }
  32. </style>

ComponentB.vue <template> <div class="container"> <h3>ComponentB</h3> 计数器的值：{{msg}} <!--也可以这么写：--> <!--计数器的值：{{this.$store.state.count1}}--> </div> </template>Parent.vue <template> <div class="outer"> <h3>父组件</h3> <component-a></component-a> <component-b></component-b> <component-c></component-c>

  1.   </div>
  2. </template>
  4. <script>
  5. import ComponentA from "./ComponentA";
  6. import ComponentB from "./ComponentB";
  7. import ComponentC from "./ComponentC";
  9. export default {
  10.   name: 'Parent',
  11.   components: {ComponentA, ComponentB, ComponentC},
  12.   data() {
  13.     return {
  14.       name: 'Tony',
  15.       age: 20,
  16.       phoneNumber: '1234567890'
  17.     }
  18.   }
  19. }
  20. </script>
  22. <style scoped>
  23. .outer {
  24.   margin: 20px;
  25.   border: 2px solid red;
  26.   padding: 20px;
  27. }
  28. </style>
  29. <script>
  30. export default {
  31.   computed:{
  32.     msg() {
  33.       return this.$store.state.count1;
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style scoped>
  40. .container {
  41.   margin: 20px;
  42.   border: 2px solid blue;
  43.   padding: 20px;
  44. }
  45. </style>

路由

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Parent from "../components/Parent";
  5. Vue.use(Router)
  7. export default new Router({
  8.   routes: [
  9.     {
  10.       path: '/parent',
  11.       name: 'Parent',
  12.       component: Parent,
  13.     }
  14.   ],
  15. })

测试访问： http://localhost:8080/#/parent

到此这篇关于Vue学习之Vuex的使用详解的文章就介绍到这了,更多相关Vuex使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行