新建项目

使用Vue CLI新建一个包含vue-router、vuex的项目

vue create vuex_demo

在 src/store/index.js 中 通过下列代码引入vuex

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

通过如下代码生成实例并导出让外部能够引用

export default new Vuex.Store({
    
})

State

将src/store/index.js如下修改、新增state

const state = {
    count: 1
}

export default new Vuex.Store({
    state
})

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的、从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

在views/About.vue中做如下修改

<template>
    <div>
        <h2>{{msg}}</h2>
        <p>{{count}}</p>
    </div>
</template>
<script>
    import store from '@/store'
    export default {
        data() {
            return {
                msg: 'Hello Vuex',
            }
        },
        computed: {
            count() {
                return store.state.count
            }
        }

    }
</script>

通过 import store from '@/store' 将src/store/index.js生成的实例对象引入、在计算属性中通过store.state.count获取该值，在页面中可以看到如下效果

state01.png

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM

我们也可以通过data引入，但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到。往下会举例说明

<p>{{count}}</p>
<p>{{count1}}</p>

data() {
    return {
        msg: 'Hello Vuex',
        count1: store.state.count
    }
}

state02.png

然而在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入。Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中

在main.js 中 通过如下代码注入到每一个子组件

import store from './store'

new Vue({
  store,
}).$mount('#app')

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 count 的实现

<p>{{count2}}</p>

computed: {
    count2() {
        return this.$store.state.count
    }
}    

state03.png

mapState 辅助函数

将文件做如下修改

src/store/index.js

const state = {
    count: 1,
    name:'qzy',
    age:18  
}

About.vue

<h2>{{msg}}</h2>
<p>{{count}}</p>
<p>{{name}}</p>
<p>{{age}}</p>

computed: {
    count() {
        return this.$store.state.count
    },
    name() {
        return this.$store.state.name
    },
    age() {
        return this.$store.state.age
    },
}

结果如下

state04.png

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

我们做如下修改

store/index.js

const state = {
    count: 1,
    sex:'男',
    name:'qzy',
    age:18  
}

About.vue

<h2>{{msg}}</h2>
<p>{{count}}</p>
<p>{{sexAlias}}</p>
<p>{{name}}</p>
<p>{{age}}</p>
import { mapState } from 'vuex'
computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'sex' 等同于 `state => state.sex`
    sexAlias: 'sex',
    // 当映射的计算属性的名称与 state 的子节点名称相同时
    age: 'age',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    name(state) {
        return `${this.msg} ${state.name }`
    },
    name1:(state=>{
        console.log(this);// undefined
        return `${state.name }`
    })
})

state05.png

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组

<h2>{{msg}}</h2>
<p>{{count}}</p>
<p>{{name}}</p>
<p>{{age}}</p>

computed: mapState(['count','name','age'])

state06.png

对象展开运算符

mapState 函数返回的是一个对象,我们可以使用对象展开运算符与局部计算属性混合使用

<h2>{{msg}} {{msgUp}}</h2>
<p>{{count}}</p>
<p>{{name}}</p>
<p>{{age}}</p>

computed: {
    ...mapState(['count','name','age']),
    msgUp(){
        return this.msg.toUpperCase()
    }
}

state07.png

组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定