Vue的Vuex怎么使用

这篇文章主要讲解了“Vue的Vuex怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue的Vuex怎么使用”吧！

优缺点

优点

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';   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/>' })

按照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'   Vue.config.productionTip = false   /* eslint-disable no-new */ new Vue({   el: '#app',   router,   store,   components: { App },   template: '<App/>' })

业务代码

代码

ComponentA.vue

<template>   <div class="container">     <h4>ComponentA</h4>     <button @click="increment1">增加：第1个计数器</button>     <button @click="decrement1">减少：第1个计数器</button><br><br>     <button @click="increment2">增加：第2个计数器</button>     <button @click="decrement2">减少：第2个计数器</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">     <h4>ComponentB</h4>     计数器的值：{{msg}}     <!--也可以这么写：-->     <!--计数器的值：{{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">     <h4>ComponentC</h4>     计数器的值：{{msg}}     <!--也可以这么写：-->     <!--计数器的值：{{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">     <h4>父组件</h4>     <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,     }   ], })

测试

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

感谢各位的阅读，以上就是“Vue的Vuex怎么使用”的内容了，经过本文的学习后，相信大家对Vue的Vuex怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！