步骤一:创建 store/index.js
添加一个 counter变量,并可以继续累加操作
export const state = () => ({
counter: 0
})
export const mutations = {
increment (state) {
state.counter++
}
}
步骤二:在页面中,使用
<template>
<div>
首页 {{counter}}
<input type="button" value="+" @click="increment"/>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
computed: {
...mapState(['counter'])
},
methods: {
...mapMutations(['increment'])
},
}
</script>
<style>
</style>
步骤一:创建其他模块 store/book.js
export const state = () => ({
money: 0
})
export const mutations = {
addmoney (state) {
state.money += 5
}
}
步骤二:使用指定模块中的数据
<template>
<div>
金额:{{money}} <br>
<input type="button" value="累加" @click="addMoney(5)">
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
methods: {
// ...mapMutations({'方法名':'模块/action名称'})
...mapMutations({'addMoney':'book/addMoney'})
},
computed: {
//...mapState('模块名称',['变量'])
...mapState('book',['money'])
}
}
</script>
<style>
</style>
// state为一个函数, 注意箭头函数写法
const state = () => ({
user: 'jack'
})
// mutations为一个对象
const mutations = {
setUser(state, value) {
state.counter = value
}
}
// action执行mutation
const actions = {
userAction (context,value){
// 可以发送ajax
context.commit('setUser',value)
}
}
// 获取数据
const getters = {
getUser (state) {
return state.user
}
}
export default {
namespace: true, // 命名空间,强制要求,在使用时,加上所属的模块名,例如:book/addmoney
state,
mutations,
actions,
getters
}