导航：首页 > 开发技术 >

Vue的Vuex怎么使用

发表于：2025-02-12 作者：千家信息网编辑

千家信息网最后更新 2025年02月12日，这篇文章主要讲解了"Vue的Vuex怎么使用"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Vue的Vuex怎么使用"吧！优缺点优点1.响应式属于 vu

千家信息网最后更新 2025年02月12日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: ''})

按照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: ''})

业务代码

代码

ComponentA.vue

ComponentB.vue

ComponentC.vue

Parent.vue

路由

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,    }  ],})