vue2在页面中使用vuex中的数据

在Vue 2中，为了在组件之间共享状态并管理全局数据，通常会使用Vuex库。要在页面上使用Vuex中的数据，你需要按照以下步骤操作：

1. **安装Vuex**: 首先确保已安装Vue CLI，然后运行`npm install vuex`或`yarn add vuex`来安装Vuex。

2. **创建store**: 在项目根目录下创建一个名为`store.js`或`vuex.js`的文件，并配置初始状态(`state`)、getter、mutation和action。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    getCount: state => state.count,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
  },
})

3. **注入store到App.vue或单个组件**:
- 在`main.js`或入口文件里，通过`inject()`方法将store注入到Vue实例中供所有组件访问：

   import store from './store'
   new Vue({ store }).$mount('#app')

4. **在组件内使用数据**:
在需要获取或修改Vuex数据的组件中，可以使用`this.$store.state`访问状态，`this.$store.getters`访问计算属性，`this.$store.dispatch(actionName)`触发actions：

   <template>
     <div>{{ countFromStore }}</div>
   </template>

   <script>
   export default {
     computed: {
       countFromStore() {
         return this.$store.getters.getCount;
       }
     },
     methods: {
       incrementCount() {
         this.$store.dispatch('increment');
       }
     }
   }
   </script>