[Vuex]Vuex的状态：state

注意：本文基于单文件组件开发模式，假定已经编写了一个名为store的js用来返回一个Vuex Store，导入了Vuex并添加了Vue.use(Vuex)等必要的代码

state是Vuex存储数据的地方。

在script中，state可以直接使用：

store.state.name

不过，在这样使用之前，还要先引入store文件：

import store from '@/store.js';

但在template中是不行的，要借助computed(计算属性)来获取：

<template>
  <div>{{name}}</div>
<template>

<script>
  impore store from '@/store.js';

  export default {
    ...
    computed: {
      name(){
        return store.state.name //假定state中有一个name字段
      }
    }
    ...
  }
</script>

组件很多时，每个组件都要引用store文件，这比较麻烦。Vuex提供了store选项，就是在创建Vue实例时，初始化Vue的store属性：

new Vue({
  ...
  store, // store: store的es6写法
  ...
  render: h => h(App)
}).$mount('#app');

这样，在每个组件中，都拥有了一个$store属性，用来访问Vuex的Store实例。
使用了store选项后，组件的计算属性需要改为：

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

还有一个知识点就是mapState，它帮助开发者在需要使用多个state时，避免重复手写多个计算属性。它返回一个对象，赋值给组件的computed：

//首先引入mapState
import { mapState } from 'vuex'

...
computed: mapState({
  'name'
}),
...

上面这样写，计算属性中只能获取store中的state，没法获取组件自身的data。如果需要获取组件自身的data，就要使用es6提供的对象展开运算符：

...
computed: {
  localComputed(){},
  ...mapState(["name"])
}
...

以上就是Vuex中关于state的最主要的知识点。

End