Vuex案例

一、简介

我们来看看对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.youkuaiyun.com/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/> 就会变成不同的组件，从而展示不同的内容）

在HelloWorld.vue里面写如下代码

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

讲解：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