Vuex的详细使用-State的详细使用

在上节已经对vuex进行了简单的描述，举了一个简单例子，点击可查看，这节将详细讲解vuex的几个属性，以及使用。

1、state

单一状态树（参考官网描述）

在 Vue 组件中获得 Vuex 状态

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 中返回某个状态：

import store from '../store'  //每次必须要导入
// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

这也是官网给的一段代码，但是我们一般不会这么操作，要获取store.state.count，每次都要导入store，不符合代码规范。

在上一节的时候，我们知道vuex可以通过根组件向所有子组件，以store选项的方式注入该store的机制，点击查看

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

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

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

2、mapState 辅助函数

  data() {
    return {
      dataCount: this.$store.state.count,
      localcount: 11,
    };
  },
  computed: mapState({
    username: "username", // 传字符串参数 'username' 等同于 `state => state.username`
    sex: (state) => state.sex,
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    myTest(state) {
      return state.count + this.localcount;
    },
    //注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    testdata: (state) => {
      return state.count + this.localcount;
    },
  }),
  created() {},

 页面显示效果：

 可以看到，用箭头函数，页面显示NaN，所以此处不要滥用箭头函数，可点击此处下载代码：

3、对象展开运算符 

 data() {
    return { userno: "001" };
  },
  computed: {
    userno(value) {
      this.userno = value;
    },
    ...mapState(["username", "sex"]),
  },

点击可查看代码vuex官网小例子

4、组件仍然保有局部状态（参考官网描述）