Vue插件——状态管理与Vuex基本用法

1.状态管理与使用场景

Vuex作为Vue的一个插件使用，可以更好地管理和维护整个项目的组件状态。 在实际业务中，经常有跨组件共享数据的需求，Vuex的设计就是用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件应用更加高效。 使用Vuex会有一定的门槛和复杂性，它的主要使用场景是大型单页应用，更适合多人协同开发。如果项目不是很复杂，也许bus方法就能很简单地解决需求。 当然，并不是所有大型多人协同开发的SPA项目都必须使用Vuex，在一些生产环境中只是使用bus也能实现得很好，用与否主要取决于团队和技术储备。 每一个框架的诞生都是用来解决具体问题的。虽然bus已经可以很好地解决跨组件通信，但它在数据管理、维护、架构设计上还知识一个简单的组件，而Vuex却能更优雅和高效地完成状态管理。

2.Vuex基本用法

2.1安装并使用Vuex

首先通过NPM安装Vuex

npm install –save vuex

在main.js里，通过Vue.use()使用Vuex：

import Vue from vue;
import Vuex from vuex;
import App from ./app.vue;

Vue.use(Vuex);

const store = new Vuex.Store({
  //vuex的配置
});

new Vue({
  el: #app,
  store: store,
  render: h => {
    return h(App)
  }
});

2.2 设置与读取数据

仓库store包含了应用的数据(状态)和操作过程。Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

数据保存在Vuex选项的state字段内，比如要实现一个计数器，定义一个数据count，初始值为0：

const store = new Vuex.Store({
  state:{
    count:0
  }
});
在任何组件内，可以直接通过$store.state.count读取
//index.vue
<template>
  <div>
    <h1>首页</h1>
    {
          
   {
          
   count}}
  </div>
</template>
<script>
  export default{
computed:{
  count(){
        return this.$store.state.count
      }
    }
  }
</script>

现在访问首页，计数0已经可以显示出来了。

2.3 更新数据

在组件内，来自store的数据只能读取，不能手动改变，改变store中数据的唯一途径就是显式地提交mutations。 mutations是Vuex的第二个选项，用来直接修改state里的数据。给计数器增加2哥mutations，用来加1和减1：

//main.js
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment(state){
      state.count++;
    },
    decrease(state){
      state.count--;
    }
  }
});
在组件内，通过this.$store.commit方法来执行mutations。在index.vue中添加两个按钮用于加和减：
<template>
  <div>
    <h1>首页</h1>
    {
          
   {
          
   count}}
    <button @click="handleIncrement">+1</button>
    <button @click="handleDecrease">-1</button>
  </div>
</template>
<script>
  export default{
    computed:{
count(){
  return this.$store.state.count;
}
},
methods:{
  handleIncrement(){
    this.$store.commit(increment);
  },
  handleDecrease(){
    this.$store.commit(decrease);
  }
}
  }
</script>

这看起来很像JavaScript的观察者模式，组件只负责提交一个事件名，Vuex对应的mutations来完成业务逻辑。

Mutations还可以接收第二个参数，可以是数字、字符串或对象等类型。比如每次增加的不是1，而是指定的数量，可以这样改写：

//main.js，部分代码省略
mutations:{
  increment (state, n=1) {
    state.count+=n;
  }
}

上文：