博客站

在 UniApp 中使用 Vuex 是实现全局状态管理的常用方法。Vuex 是 Vue.js 的官方状态管理工具，适合管理跨组件的共享状态。以下是 UniApp 中使用 Vuex 的详细步骤：

一、安装 Vuex

如果项目中没有安装 Vuex，可以通过以下命令安装：

npm install vuex

二、配置 Vuex

1. 创建 Vuex Store

• 在项目中创建 store 目录，并在其中创建 index.js 文件。
• 示例：

  // store/index.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count  ;
      },
      decrement(state) {
        state.count--;
      }
    },
    actions: {
      incrementAsync({ commit }) {
        setTimeout(() => {
          commit('increment');
        }, 1000);
      }
    },
    getters: {
      doubleCount(state) {
        return state.count * 2;
      }
    }
  });
  
  export default store;
  

2. 在 Vue 实例中使用 Store

• 在 main.js 中引入 store 并挂载到 Vue 实例。
• 示例：

  // main.js
  import Vue from 'vue';
  import App from './App';
  import store from './store';
  
  const app = new Vue({
    store,
    ...App
  });
  app.$mount();
  

三、在组件中使用 Vuex

1. 访问 State

• 在组件中通过 this.$store.state 访问 Vuex 的状态。
• 示例：

  <template>
    <view>
      <text>Count: {{ count }}</text>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      count() {
        return this.$store.state.count;
      }
    }
  };
  </script>
  

2. 触发 Mutations

• 通过 this.$store.commit 触发 Vuex 的 mutations 来修改状态。
• 示例：

  <template>
    <view>
      <text>Count: {{ count }}</text>
      <button @click="increment">增加</button>
      <button @click="decrement">减少</button>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
    methods: {
      increment() {
        this.$store.commit('increment');
      },
      decrement() {
        this.$store.commit('decrement');
      }
    }
  };
  </script>
  

3. 触发 Actions

• 通过 this.$store.dispatch 触发 Vuex 的 actions 来执行异步操作。
• 示例：

  <template>
    <view>
      <text>Count: {{ count }}</text>
      <button @click="incrementAsync">异步增加</button>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
    methods: {
      incrementAsync() {
        this.$store.dispatch('incrementAsync');
      }
    }
  };
  </script>
  

4. 使用 Getters

• 通过 this.$store.getters 访问 Vuex 的 getters。
• 示例：

  <template>
    <view>
      <text>Double Count: {{ doubleCount }}</text>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      doubleCount() {
        return this.$store.getters.doubleCount;
      }
    }
  };
  </script>
  

四、模块化 Vuex

对于大型项目，可以将 Vuex Store 拆分为多个模块。

1. 创建模块

• 在 store 目录下创建模块文件，例如 user.js：

  // store/modules/user.js
  const state = {
    name: 'UniApp',
    age: 3
  };
  
  const mutations = {
    setName(state, name) {
      state.name = name;
    }
  };
  
  const actions = {
    updateName({ commit }, name) {
      commit('setName', name);
    }
  };
  
  const getters = {
    userInfo(state) {
      return `Name: ${state.name}, Age: ${state.age}`;
    }
  };
  
  export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
  };
  

2. 注册模块

• 在 store/index.js 中注册模块：

  import Vue from 'vue';
  import Vuex from 'vuex';
  import user from './modules/user';
  
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    modules: {
      user
    }
  });
  
  export default store;
  

3. 在组件中使用模块

• 示例：

  <template>
    <view>
      <text>{{ userInfo }}</text>
      <button @click="updateName">更新名字</button>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      userInfo() {
        return this.$store.getters['user/userInfo'];
      }
    },
    methods: {
      updateName() {
        this.$store.dispatch('user/updateName', 'New Name');
      }
    }
  };
  </script>
  

五、总结

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

1. 安装 Vuex：通过 npm install vuex 安装 Vuex。
2. 配置 Vuex：创建 store 并配置 state、mutations、actions 和 getters。
3. 在组件中使用 Vuex：
   • 访问 state：this.$store.state。
   • 触发 mutations：this.$store.commit。
   • 触发 actions：this.$store.dispatch。
   • 使用 getters：this.$store.getters。
4. 模块化 Vuex：将 Vuex Store 拆分为多个模块，便于管理。

以下是一个完整的 Vuex 示例：

1. store/index.js

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: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

2. main.js

import Vue from 'vue';
import App from './App';
import store from './store';

const app = new Vue({
  store,
  ...App
});
app.$mount();

3. 组件中使用

<template>
  <view>
    <text>Count: {{ count }}</text>
    <text>Double Count: {{ doubleCount }}</text>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">异步增加</button>
  </view>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

通过合理使用 Vuex，可以高效地管理 UniApp 中的全局状态，提升应用的可维护性和扩展性。