跳到主要内容
版本:3.x

Vue2 Vuex

Taro Vue2 支持使用 Vuex 进行状态管理。

安装

首先请安装 vuex 的 3.x 版本:

$ yarn add vuex@^3
# 或者使用 npm
$ npm install vuex@^3

例子

  • 运行 taro init 命令时选择 Vue -> vuex 即可创建 vue2-redux 模板项目。

使用

在项目中新建 src/store/index.js 文件用来配置 store,根据需求设置 statemutationsactionsgetters

src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
numbers: [1, 2, 3],
}

const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload)
},
}

const actions = {
addNumber(context, number) {
context.commit('ADD_NUMBER', number)
},
}

const getters = {
getNumbers(state) {
return state.numbers
},
}

export default new Vuex.Store({
state,
mutations,
actions,
getters,
})

为了在组件中可以通过 this.$store 获取到 store,我们需要把 store 注入到 Vue 实例中:

src/app.js
import Vue from 'vue'
import store from './store'

const App = {
store,
render(h) {
return h('block', this.$slots.default)
},
}

export default App

接下来即可以在 Vue 组件中使用 store 了,如:

this.$store.dispatch('addNumber', 1)