Vue之Vuex(状态管理模式)

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

1. 解决不同组件之间的数据共享
2. 解决组件的数据存储问题

实现

1. 首先，在store.js实例化一个Vuex，用来对数据进行存储：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store =  new Vuex.Store({
  state:{
    count:1
  },
  mutations:{
    increment(state){
      state.count++
    }
  }
})

export default store

2. 在About.vue引入store.js定义好的store，并对store里的count进行累加操作：

<template>
  <div class="about">
    这是about组件
    <br>
    <br>
    <br>
    <br>
    <!-- 3.引用store的count -->
    {{this.$store.state.count}}
    <button  @click="incre">累加</button>
  </div>
</template>

<script>
//1.引入store
import store from "../store.js"
export default {
  data(){
    return{
      title:"这是about组件"
    }
  },
  //2.注册
  store,
  methods:{
    incre(){
      //改变值的话，引用store.js的increment方法
      this.$store.commit("increment")
    }
  }
}
</script>

3. 这就实现数据存储问题，接下来实现不同组件之间的数据共享。在Home.vue引入store.js定义好的store，将会访问到About,vue改变的值：

<template>
  <div class="home">
    这是Home组件
    <br>
    <br>
    <br>
    {{this.$store.state.count}}
  </div>
</template>

<script>
import store from "../store.js"
export default {
  data(){
    return{
      title:"这是home组件"
    }
  },
  store,
}
</script>