Vuex 概念

Vuex 用于解决组件与组件之间共享的状态，集中存储管理所有组件状态
创建一个Test.vue实现一个简单的计数器功能

<template>
  <div class="test">
    私有 : {{count}}<br>
    <button @click="addCount">私有+</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "Test",
  data(){
    return{
      count : 0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>
//这是基础课程中的计数器，它只能作用于这个组件，跳到其它组件即失效

store 模式

如果应用特别简单，可以使用store模式，可以支持共享极少的数据
创建一个store/index.js

const store={
    state :{
        count:0
    },
    increment(){
        this.state.count++
    }
}

export default store

在Test.vue中添加

<template>
  <div class="test">
    私有 : {{count}} , 共享 : {{storeState.count}}<br>
    <button @click="addCount">私有+</button>
    <button @click="increment">共享+</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "Test",
  data(){
    return{
      count : 0,
      storeState:store.state
    }
  },
  methods:{
    addCount(){
      this.count++
    },
    increment() {
      store.increment()
    }
  }
}
</script>

其它页面可以通过 storeState:store.state 获取改页面自加后的数据。