mpvue+vuex搭建小程序详细教程(完整步骤)

这里给您详细讲解一下“mpvue+vuex搭建小程序详细教程(完整步骤)”。

简介

本教程将介绍如何使用 mpvue 和 vuex 搭建一个小程序。mpvue 是一个使用 Vue.js 开发小程序的前端框架，而 vuex 则是 Vue.js 的状态管理工具。本次教程的重点是如何使用 vuex 在 mpvue 中控制状态的管理。

步骤

1. 创建一个 mpvue 项目

首先，我们需要使用 mpvue-cli 创建一个 mpvue 项目。

$ npm install -g vue-cli
$ vue init mpvue/mpvue-quickstart my-project
$ cd my-project
$ npm install
$ npm run dev

运行上述命令后，我们就可以在浏览器中看到一个简单的小程序。这个小程序只有一个 Hello World 页面，打开 /src/pages/index.vue 文件可以看到。

2. 引入 vuex

接下来，我们需要引入 vuex。在项目的根目录中执行以下命令：

$ npm install vuex --save

然后，在 src 目录中创建一个名为 store 的目录，在 store 目录下创建一个名为 index.js 的文件，这个文件就是 vuex 的入口。在 index.js 中，我们需要引入 vue 和 vuex，并创建一个 vuex 的实例：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 状态管理属性
  },
  mutations: {
    // 状态管理方法
  },
  actions: {
    // 发送异步请求以及提交 mutation 的方法
  }
})

export default store

在上面的代码中，state 表示状态管理的属性，mutations 表示状态管理的方法，actions 表示发送异步请求以及提交 mutation 的方法。

3. 把 vuex 引入到项目中

在 main.js 中引入 vuex，并把 vuex 实例挂载到全局变量中：

import Vue from 'vue'
import App from './App'
import store from './store' // 引入 vuex 实例
Vue.prototype.$store = store // 把 vuex 实例挂载到全局

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
  store, // vuex 实例注入根组件
  ...App
})

app.$mount()

4. 在组件中使用 vuex 状态管理

在组件中使用 vuex 非常简单，只需要在 computed 中获取或修改状态，使用 dispatch 方法调用 actions，使用 commit 方法调用 mutations。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
  export default {
    computed: {
      message() {
        return this.$store.state.message // 获取状态
      }
    },
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'New message') // 调用 actions
        this.$store.commit('updateMessage', 'New message') // 调用 mutations
      }
    }
  }
</script>

上述代码展示了如何在组件中获取状态、调用 actions 和 mutations。

示例1

在 store 目录下创建一个名为 counter.js 的文件，表示计数器组件的状态管理。在 counter.js 中定义一个名为 state 的属性和两个名为 increment 和 decrement 的方法：

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  increment({ commit }) {
    commit('increment')
  },
  decrement({ commit }) {
    commit('decrement')
  }
}

export default {
  state,
  mutations,
  actions
}

在 store/index.js 中引入 counter.js 并创建一个实例：

import Vue from 'vue'
import Vuex from 'vuex'
import counter from './counter'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    counter
  }
})

export default store

在组件中使用 vuex（以 counter.vue 为例）：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
  export default {
    computed: {
      count() {
        return this.$store.state.counter.count
      }
    },
    methods: {
      increment() {
        this.$store.dispatch('counter/increment')
      },
      decrement() {
        this.$store.dispatch('counter/decrement')
      }
    }
  }
</script>

示例2

以下示例演示如何将 vuex 状态管理的属性和方法作为 prop 传递给子组件，在子组件中获取、调用。

在 store 目录下创建一个名为 user.js 的文件，表示用户组件的状态管理。在 user.js 中定义一个名为 state 的属性和两个名为 login 和 logout 的方法：

const state = {
  isLogin: false
}

const mutations = {
  login(state) {
    state.isLogin = true
  },
  logout(state) {
    state.isLogin = false
  }
}

const actions = {
  login({ commit }) {
    commit('login')
  },
  logout({ commit }) {
    commit('logout')
  }
}

export default {
  state,
  mutations,
  actions
}

在 store/index.js 中引入 user.js 并创建一个实例：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

在根组件 App.vue 中引入子组件 component.vue：

<template>
  <div class="container">
    <component :is-login="isLogin" :login="login" :logout="logout"></component>
  </div>
</template>

<script>
  import component from '@/components/component.vue'

  export default {
    components: { component },
    computed: {
      isLogin() {
        return this.$store.state.user.isLogin
      }
    },
    methods: {
      login() {
        this.$store.dispatch('user/login')
      },
      logout() {
        this.$store.dispatch('user/logout')
      }
    }
  }
</script>

在子组件 component.vue 中获取、调用 vuex 的属性和方法：

<template>
  <div>
    <p>{{ isLogin }}</p>
    <button @click="login">Login</button>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
  export default {
    props: {
      isLogin: Boolean,
      login: Function,
      logout: Function
    },
    computed: {
      message() {
        return `${this.isLogin ? 'Welcome' : 'Please login'}!`
      }
    }
  }
</script>

总结

这样就完成了一个基于 mpvue 和 vuex 的小程序。在这个小程序中，我们可以使用 vuex 来管理组件之间的通讯，从而更好地掌握小程序的数据流。本教程也可以扩展到其他类型的应用中，包括 Web 应用和桌面应用等。