Vuex案例

落日映苍穹つ 2021-10-18 22:38 284阅读 0赞

## 一、简介 ##

我们来看看对Vuex比较专业的介绍：

> Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简而言之，Vuex采用**类似全局对象**的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

## 二、优点 ##

**Vuex状态管理跟使用传统全局变量的不同之处：**

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。  
.  
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commit）mutations来实现修改（**解释：也就是通过store对象里定义的mutation属性下的函数来修改Vuex的状态值**）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

## 三、步骤 ##

（ **提示：本文后面有源代码地址**）

##### 1.安装Vuex #####

在项目的终端命令行下执行如下命令

npm install vuex --save

##### 2.引用Vuex #####

在main.js里面引入如下代码

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)

##### 3.创建仓库Store #####

然后在main.js里面创建store对象

//创建一个 store
     const store = new Vuex.Store({});

如果还不了解Store里面的4个属性，可以参考这篇文章[https://blog.csdn.net/qq\_40241957/article/details/99424634][https_blog.csdn.net_qq_40241957_article_details_99424634]  
然后我们在store里面写上一些我们自定义的代码

// 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 Vuex from 'vuex'
    Vue.use(Vuex)
    
    Vue.config.productionTip = false
    
    const store = new Vuex.Store({ 
      state: {  /* vuex的状态量，类似于全局变量，在整个项目里面都可以使用 */
        count: 0   //我们以定时器demo为例，就自定义一个count变量
      },
      getters: { 
    
      },
      mutations: {  /* 在里面 定义处理state里面变量的函数 */
        increment (state, value) { 
          state.count += value
        },
        decrement (state, value) { 
          state.count -= value
        }
      },
      actions: { 
        myIncrease (context) { 
          context.commit('increment', 1)
        },
        myDecrease (context) { 
          context.commit('decrement', 1)
        }
      }
    
    })
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>',
      store /* 把上面定义的store对象与本vue实例绑定 */
    })

然后我们就可以在App.vue里面写如下代码（**提示：App.vue是所有component组件的父组件，可以看到在App.vue代码里面有`<router-view/>` ,这就是用来展示其他组件的地方。也就是说我们的整个vue项目里面都是展示的App.vue组件的内容，然后随着我们访问不同的路由地址，那么App.vue代码里面的`<router-view/>` 就会变成不同的组件，从而展示不同的内容**）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]  
在HelloWorld.vue里面写如下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]

最后在项目的终端使用命令`npm run dev`启动项目，运行效果截图如下：下面有具体讲解

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]  
**讲解：App.vue是所有component组件的父组件，可以看到在App.vue代码里面有`<router-view/>` ,这就是用来展示其他组件的地方。也就是说我们的整个vue项目里面都是展示的App.vue组件的内容，然后随着我们访问不同的路由地址，那么App.vue代码里面的`<router-view/>` 就会变成不同的组件，从而展示不同的内容**

下面的运行结果其实是由App.vue这个父组件展示的，然后App.vue代码里面的`<router-view/>`，因为我们访问的是localhost:8080/,所以根据路由规则（下面的第2张图），`<router-view/>`展示HelloWorld这个component  
![在这里插入图片描述][20190813145459596.png]  
![在这里插入图片描述][20190813145650199.png]

[https_blog.csdn.net_qq_40241957_article_details_99424634]: https://blog.csdn.net/qq_40241957/article/details/99424634
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20211018/610ffc517f354a65bb1c31bc6816af7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20211018/d589a3b4ff8846568b367137587c4212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20211018/d7ad6a773f78400fb85db725ea9389a4.png
[20190813145459596.png]: /images/20211018/0065e51356b943f4a4e6cb2a8a382cef.png
[20190813145650199.png]: /images/20211018/46b0552e86fb4800b1d5af1fa488ecbe.png