怎么使用vuex的数据和方法

Vue组件中使用Vuex的状态和方法，首先需要在组件中引入Vuex的mapState和mapActions辅助函数，然后使用computed属性或methods属性来访问状态和方法。

以下是一个简单的例子：

1. 安装并设置Vuex：

   npm install vuex --save

2. 在store.js中定义状态和方法：

   import Vue from 'vue';
   import Vuex from 'vuex';
    
   Vue.use(Vuex);
    
   export default new Vuex.Store({
     state: {
       count: 0,
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     },
     actions: {
       incrementAction({ commit }) {
         commit('increment');
       }
     },
     getters: {
       doubleCount(state) {
         return state.count * 2;
       }
     }
   });

3. 在组件中使用Vuex：

   <template>
     <div>
       {{ count }}
       <button @click="increment">Increment</button>
     </div>
   </template>
    
   <script>
   import { mapState, mapActions } from 'vuex';
    
   export default {
     computed: {
       ...mapState({
         count: state => state.count
       }),
       ...mapGetters([
         'doubleCount'
       ])
     },
     methods: {
       ...mapActions([
         'incrementAction'
       ])
     }
   };
   </script>

   在这个例子中，我们使用mapState生成计算属性count，它映射到Vuex store的状态state.count。我们还使用mapGetters生成了一个计算属性doubleCount，它是一个从store的状态派生的值。在methods中，我们使用mapActions生成方法increment，它映射到Vuex store的动作incrementAction。当按钮被点击时，increment方法被触发，它通过调用incrementAction来改变Vuex store中的状态。