Vuex store的基本用法

一、安装和创建store

1、安装Vuex

• 如果使用Vue CLI创建项目，可以通过以下命令安装Vuex：

npm install vuex --save

• 然后在main.js（或入口文件）中引入并使用Vuex：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

2、创建store实例

• 创建一个store.js文件（名称可自定义），在其中定义store。一个基本的Vuex store结构如下：

const store = new Vuex.Store({
  // 存储应用的状态
  state: {
    count: 0
  },
  // 定义修改状态的同步函数（唯一途径来修改state）
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  // 定义异步操作，可以在内部调用mutations
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  // 类似于计算属性，用于从state派生出新的数据
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

二、在组件中使用store

1、获取state数据

• 在组件中，可以通过this.$store.state来获取store中的状态数据。例如，在一个Vue组件中：

<template>
  <div>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

2、触发mutations修改state

• 要修改store中的状态，需要通过mutations。可以使用this.$store.commit方法来触发mutations。例如：

<template>
  <div>
    <button @click="increment">增加计数</button>
    <button @click="decrement">减少计数</button>
  </div>
</template>
<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>

3、调用actions执行异步操作

• 对于异步操作，可以使用this.$store.dispatch来调用actions。例如：

<template>
  <div>
    <button @click="asyncIncrement">异步增加计数</button>
  </div>
</template>
<script>
export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement');
    }
  }
};
</script>

4、使用getters获取派生数据

• 在组件中，可以像使用计算属性一样使用getters。例如：

<template>
  <div>
    <p>双倍计数: {{ doubleCount }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
};
</script>

通过以上步骤，就可以在Vue项目中基本掌握Vuex store的用法，实现应用状态的集中管理和组件间的数据共享。