vue 获取及修改store.js里的公共变量实例

获取和修改vue中的全局变量通常需要使用Vuex。Vuex是一个专业用于管理Vue应用中的状态(state)的库。它支持将状态集中在单个位置中，以便更轻松地进行管理和交互。

下面是如何在vue中获取和修改store.js里的公共变量实例的详细攻略：

1. 安装依赖

为了使用Vuex，您需要先安装它。您可以在项目中使用以下命令安装它：

npm install vuex --save

安装完成后，您需要在Vue中引入和注册Vuex。这可以在您的main.js文件中完成：

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

Vue.use(Vuex)

1. 创建一个Vuex Store实例

在您的store.js文件中，您需要创建Vuex Store实例：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1. 在Vue组件中使用Vuex

在Vue组件中使用Vuex需要引入您的store实例。也就是说，您需要将store.js文件导入到您需要使用状态的Vue组件中。然后，您就可以使用Vuex中的getters和mutations来访问和修改store实例中的状态。

以下是一个示例组件，它使用getter和commit函数从Vuex Store中获取和移除状态：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'
  import store from '../store'

  export default {
    computed: {
      ...mapGetters([
        'count'
      ])
    },
    methods: {
      ...mapMutations([
        'increment'
      ]),
      incrementCount: function () {
        this.increment()
      }
    },
    store
  }
</script>

在这个示例中，我们使用了Vuex mapGetters和mapMutations函数来将count getter和increment mutation映射到Vue组件的计算属性和方法中。这样，我们就可以在计算属性和方法中直接使用它们，而无需在Vue组件内部直接操作store实例。

当我们点击Increment按钮时，incrementCount方法会调用increment mutation函数并在store实例中更新count状态。更新后的状态可以自己缓存并匹配需要展示的页面。

总之，通过上述步骤，就可以方便地获取和修改Vue应用程序中存储库中的公共变量。