[JavaScript知识库]复习一下vuex

store下的index.js
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
const state = {

? sum: 0

}

// actions: 用于响应组件中的动作

const actions = {

? jia (context, value) {

? ? context.commit('JIA', value)

? },

? jian (context, value) {

? ? context.commit('JIAN', value)

? }

}

// mutations: 用于操作数据（state）

const mutations = {

? JIA (state, value) {

? ? state.sum += value

? },

? JIAN (state, value) {

? ? state.sum -= value

? }

}

// getters: 用于将state中的数据加工

const getters = {

? bigSum(state) {

? ? return state.sum * 10

? }

}

export default new Vuex.Store({

? state,

? actions,

? mutations,

? getters

})

组件用例：

<template>

? <div class="hello">

? ? <h5>{{sum}}</h5>

? ? <h5>{{bigSum}}</h5>

? ? <div>{{he}}</div>

? ? <button @click="jia(1)">+</button>

? </div>

</template>

<script>

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {

? name: '',

? data() {

? ? return{

? ? }

? },

? methods: {

? ? ...mapActions(['jia']),

? ? ...mapMutations(['JIAN'])

? },

? computed: {

? ? // sum () {

? ? // ? return this.$store.state.sum

? ? // },

? ? // bigSum () {

? ? // ? return this.$store.getters.bigSum

? ? // },

? ? ...mapState({he: 'sum'}), // 对象写法

? ? ...mapState(['sum']), // 数组写法

? ? ...mapGetters(['bigSum'])

? },

}

</script>