机遇屋-uniapp定义公共函数及uniapp中使用vuex

uniapp定义公共函数及uniapp中使用vuex

作者：ych

#### 公共函数
设我们有一个commonMethods.js文件，在其中定义了一个名为formatDate的函数，用于将时间戳转化为可读的日期格式。代码如下：
```
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month}-${day}`;
}

export default {
  formatDate,
};
```
现在我们需要在Vue组件中使用该函数。在main.js文件中，我们可以这样写：

```
import Vue from 'vue';
import commonMethods from './commonMethods';

Vue.prototype.$commonMethods = commonMethods;
```
这样在任何Vue组件中就可以通过this.$commonMethods.formatDate()来调用commonMethods.js中的formatDate函数进行日期格式转换了。例如，我们可以在某个Vue组件的方法中使用它：
```
methods: {
  showDate() {
    const timestamp = 1635953459000; // 假设这是一个时间戳
    const formattedDate = this.$commonMethods.formatDate(timestamp);
    console.log(formattedDate); // 输出 "2021-11-3"
  },
},
```
这样就可以方便地复用commonMethods.js中的代码，并且在整个应用程序中都能够保持一致性。

#### 使用vuex
Vuex是Vue.js官方推荐的状态管理库，用于在Vue应用程序中集中管理和共享状态。下面是一个简单的示例来演示如何使用Vuex。

首先，在src目录下创建一个名为store.js的文件，并在其中定义Vuex store对象。代码如下：

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

Vue.use(Vuex);

export default store;
```
上述代码创建了一个包含state、mutations、actions和getters的Vuex Store对象。state中包含了一个名为count的状态，mutations中定义了两个同步的mutation，actions中定义了一个异步的action，getters中定义了一个计算属性。

然后，在main.js文件中导入并挂载该store对象，代码如下：

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

new Vue({
  el: '#app',
  store,
  render: (h) => h(App),
});
```
接下来，我们可以在Vue组件中使用Vuex store对象。例如，在某个Vue组件中的methods选项中，我们可以使用this.$store.state来访问store中的状态，使用this.$store.commit('mutationName')来提交一个mutation，使用this.$store.dispatch('actionName')来分发一个action。同时，我们也可以使用this.$store.getters来访问getters中定义的计算属性。

下面是一个简单的示例来演示如何在Vue组件中使用Vuex：

```
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

##### 在js中调用
要在JavaScript文件中使用Vuex，需要导入Vuex库和定义的store对象。下面是一个使用Vuex的JavaScript文件示例，假设我们有一个名为counter.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--;
    },
  },
});

export default store;
```
在上述代码中，我们使用ES6的模块化语法来导出Vuex Store对象。

接下来，在另一个JavaScript文件中，导入counter.js中的Vuex Store对象并使用它。代码如下：

```
import store from './counter.js';

// 获取状态值
console.log(store.state.count);

// 提交一个mutation
store.commit('increment');

// 分发一个action
store.dispatch('asyncIncrement');
```
在上述代码中，我们首先使用import store from './counter.js'导入了counter.js中定义的Vuex Store对象。然后，我们使用store.state.count获取了Vuex Store中的count状态值，使用store.commit('increment')提交了一个increment mutation，使用store.dispatch('asyncIncrement')分发了一个asyncIncrement action。

评论区

先去登录

uniapp定义公共函数及uniapp中使用vuex

相关推荐

评论区