Vuex 状态树

根模块数据操作

步骤一：创建 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}}
    <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>

完整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
}