7. Vuex 状态树
7.1 根模块数据操作
-
步骤一:创建
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>
7.2 其他模块数据操作
-
步骤一:创建其他模块
store/book.js
export const state = () => ({ money: 0 }) export const mutations = { addmoney (state) { state.money += 5 } }
-
步骤二:使用指定模块中的数据
<template> <div> 首页 {{money}} <input type="button" value="+" @click="addmoney" /> </div> </template> <script> import { mapState,mapMutations } from 'vuex' export default { computed: { money () { return this.$store.state.book.money } }, methods: { ...mapMutations({ addmoney: 'book/addmoney' }) }, } </script> <style> </style>
7.3 完整vuex模板
// 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, // 命名空间
state,
mutations,
actions,
getters
}