Taro 中如何使用 Vuex？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Taro 中使用 Vuex 的步骤如下：

安装 Vuex：首先，确保你已经安装了 Vuex。如果没有安装，可以通过以下命令进行安装：
```
npm install vuex --save
```

创建 Vuex Store：在你的项目中创建一个 store 目录，并在其中创建一个 index.js 文件来定义 Vuex store：

// www.javascriptcn.com code example
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

在 Taro 中引入 Vuex Store：在你的 Taro 项目入口文件（通常是 app.js 或 app.tsx）中引入并使用 Vuex store：

// www.javascriptcn.com code example
import Taro from '@tarojs/taro';
import { Provider } from '@tarojs/redux';
import store from './store';

class App extends Taro.Component {
  render() {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    );
  }
}

export default App;

在组件中使用 Vuex：在 Taro 组件中，你可以通过 mapState、mapGetters、mapActions 等辅助函数来访问 Vuex 的状态和方法：

// www.javascriptcn.com code example
import Taro from '@tarojs/taro';
import { connect } from 'react-redux';
import { mapState, mapActions } from 'vuex';

@connect(
  mapState({
    count: state => state.count,
    doubleCount: state => state.doubleCount
  }),
  mapActions({
    increment: 'increment'
  })
)
class MyComponent extends Taro.Component {
  render() {
    const { count, doubleCount, increment } = this.props;
    return (
      <View>
        <Text>{count}</Text>
        <Text>{doubleCount}</Text>
        <Button onClick={increment}>Increment</Button>
      </View>
    );
  }
}

export default MyComponent;

本题详细解读

Vuex 的核心概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

State：Vuex 使用单一状态树，即一个对象包含了全部的应用层级状态。它是唯一的数据源。
Getters：可以认为是 store 的计算属性。Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
Actions：Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。

在 Taro 中使用 Vuex 的注意事项

Provider 组件：Taro 使用 Provider 组件来将 Vuex store 注入到整个应用中。Provider 是 React-Redux 的一个组件，但在 Taro 中也可以用来连接 Vuex。
connect 函数：connect 函数用于将 Vuex 的 state 和 actions 映射到组件的 props 中。通过 mapState 和 mapActions 等辅助函数，可以方便地在组件中访问和操作 Vuex 的状态。

代码示例解析

创建 Store：在 store/index.js 中，我们定义了一个简单的 Vuex store，包含一个 count 状态、一个 increment mutation 和一个 doubleCount getter。
引入 Store：在 app.js 中，我们使用 Provider 组件将 Vuex store 注入到整个应用中。
组件中使用 Vuex：在 MyComponent 组件中，我们通过 connect 函数将 Vuex 的 count 状态和 increment action 映射到组件的 props 中，并在组件中使用它们。

通过以上步骤，你可以在 Taro 项目中成功使用 Vuex 来管理应用的状态。