vue2 $store 存值取值

Vue.js 2.x 中的 `$store` 是 Vuex 库提供的状态管理工具。Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它采用集中式存储应用的所有组件共享的数据。

在 Vuex 中，你可以通过以下几个步骤存值和取值：

1. **创建 store**: 首先，在项目中安装 Vuex 并创建一个 store.js 文件，初始化 store，设置 state、mutations、actions 和 getters。例如：

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

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

2. **注入 store**: 将 store 注入到 Vue 实例中以便在组件内访问，通常是全局注入：

   import store from './store';
   Vue.use(Vuex);
   new Vue({ store });

3. **使用 store**: 在组件中，可以使用 `this.$store` 访问 store 的数据和方法。例如存值：

   <button @click="incrementCount">Increment</button>

   methods: {
     incrementCount() {
       this.$store.commit('increment');
     },
     getCount() { // 获取值
       console.log(this.$store.getters.getCount); // 输出当前计数
     }
   }

4. **分片（Modules）**: 如果应用较大，可以将状态划分为模块。每个模块都有独立的 state、mutations 和 getters。