Back to Wepy

Vuex in WePY 2.0

packages/x/README_EN.md

2.1.01.2 KB
Original Source

English | 简体中文

Vuex in WePY 2.0

Install

npm install @wepy/x vuex --save

Usage

  1. Install Vuex
// app.wpy
import wepy from '@wepy/core';
import vuex from '@wepy/x';

wepy.use(vuex);
  1. Initialize a store
// ~/store.js
import Vuex from '@wepy/x';

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    increment (state) {
      state.num++;
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment');
    },
    incrementAsync ({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    }
  }
})
  1. Map to Component
// ~/counter.wpy
<template>
  <div> {{num}} </div>
  <button @tap="increment"> Increment </button>
  <button @tap="incrementAsync"> Increment Async </button>
</template>
<script>
import wepy from '@wepy/core';
import { mapState, mapActions } from '@wepy/x';

wepy.component({
  computed: {
    ...mapState([ 'num' ])
  },
  methods: {
    ...mapActions([ 'increment', 'incrementAsync' ])
  }
})

Document

https://vuex.vuejs.org/

Other

Vuex Module is not supportted currently. Check the Issue here.