Vue状态管理：vuex基础

还是像以前一样用一个简单的案例来解释vuex

首先，新建一个模板demo

vue init webpack-simple demo

我们需要两个组件：一个输入组件和一个显示组件

在src文件夹中新建一个components文件夹，添加一个showInfo.vue

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
    props: ['msg']
}
</script>

然后，再添加一个changeInfo.vue

<template>
    <input type="text" :value="msg">
</template>

<script>
export default {
    props: ['msg']
}
</script>

修改App.vue：

<template>
  <div>
    <show-info :msg="msg"></show-info>
    <change-info :msg="msg"></change-info>
  </div>
</template>

<script>
import showInfo from './components/showInfo'
import changeInfo from './components/changeInfo'

export default {
  components: {
    showInfo,
    changeInfo
  },
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

运行起来或许是这样的：

缺点是信息传递仍然是使用绑定:msg="msg"，而且由于vue组件之间传输信息的限制，现在修改输入组件的文本并不会改变显示组件的值。

现在来使用vuex来传递变量信息，首先安装vuex：

npm install vuex --save

然后在src文件夹下新建vuex文件夹，并添加store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 添加两个常量state和mutations
const state = {
    msg: 'Hello Vue!'
}

const mutations = {
    changeMessage(state, msg) {
        state.msg = msg
    }
}

// 初始化已经创建的常量
export default new Vuex.Store({
    state: state,
    mutations: mutations
})

注意，在ES6中{state: state, mutations: mutations}可以简写为{state, mutations}

然后修改App.vue：

然后，在src/components/showInfo.vue中需要使用计算属性来代替props：

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
    computed: {
        msg() {
            return this.$store.state.msg
        }
    }
}
</script>

在changeInfo.vue中需要额外添加changeMsg方法：

<template>
    <input type="text" :value="msg" @keyup="changeMsg">
</template>

<script>
export default {
    computed: {
        msg() {
            return this.$store.state.msg
        }
    },
    methods: {
        changeMsg(e) {
            this.$store.commit('changeMessage', e.target.value)
        }
    }
}
</script>

来看一下运行效果：

然而，现在的代码是非常不好维护的，想象一下下面两个场景：

1) 在一个大规模的应用中如果不同的组件都使用了$this.store.state.somevalue，一旦我们修改了somevalue的名字，就需要修改所有用到它的组件。

2) 如果有一个需要计算的值，例如计数器counter，如果其他的组件需要对它执行+1操作的话就得在组件中添加一个单独的方法，导致代码冗余。

首先，为了解决第一个问题，我们需要在vuex中引入一个getters.js文件：

export default {
    getMessage(state) {
        return state.msg
    }
}

然后在store.js中引入getters.js

然后在两个组件中修改引用store.state.msg方法

computed: {
    msg() {
        return this.$store.getters.getMessage
    }
}

遗憾的是this.$store.getters这个符号仍然很长，我们一般都希望使用短一点的名字来表示变量，好消息是vue提供了mapGetters来帮助我们映射变量名，仅仅只需要引入并修改计算属性：

<!-- showInfo.vue -->
<template>
    <h1>{{ getMessage }}</h1>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters(['getMessage'])
}
</script>

不过一个更好的方法是使用对象来代替mapGetters中的数组：

<!-- showInfo.vue -->
<template>
    <h1>{{ msg }}</h1>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage'
    })
}
</script>

现在，让我们来体验一下这种修改的好处吧。如果我们需要将输入的所有字母转化为大写，只需要做一处修改src/vuex/getters.js：

export default {
    getMessage(state) {
        return (state.msg).toUpperCase()
    }
}

这就像魔法一样神奇！接着来解决第二个问题。

首先在store.js中添加counter属性和相应的方法：

因此，在getters.js文件中：

export default {
    getMessage(state) {
        return (state.msg).toUpperCase()
    },
    getCounter(state) {
        return (state.counter)
    }
}

同时，在显示组件showInfo.vue上显示counter：

<template>
    <div>
        <h1>{{ msg }}</h1>
        <div>The message was changed {{ counter }} times</div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage',
        counter: 'getCounter'
    })
}
</script>

然后，在src/vuex中添加actions.js来管理函数调用的动作：

export default {
    CHANGE_MSG({ commit }, msg) {
        commit('changeMessage', msg)
    },
    ADD_COUNTER({ commit }) {
        commit('addCounter')
    }
}

然后像引用getters.js一样在store.js中引用actions.js（同样也用mapActions映射函数名），最后在changeInfo.vue组件中引用这两个action：

<!-- changeInfo.vue -->
<template>
    <input type="text" :value="msg" 
    @keyup="chMsg($event.target.value)"
    @keyup.enter="addCnt">
</template>

<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
    computed: mapGetters({
        msg: 'getMessage'
    }),
    methods: mapActions({
        chMsg: 'CHANGE_MSG',
        addCnt: 'ADD_COUNTER'
    })
}
</script>

 源码下载：https://files.cnblogs.com/files/viewts/vuex_demo.zip