Vue的Vuex怎么使用

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

优缺点

优点

响应式

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

可预测的方式改变数据

避免数据污染

无需转换数据

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

缺点

复杂

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

不能持久化（刷新页面后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 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 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怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！