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
,根据需求设置 state
、mutations
、actions
、getters
:
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)