vue.js 之 vuex 中的 state 使用

state

• 我们先来看一个简单的state实例使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
count: 0
  }
})

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

//创建一个Counter组件
const Counter = {
    data() { return {} },
    template: `<div>{{ count }}</div>`,
    computed: {
        count () {
          return store.state.count
      }    
    }
  }

• 每当 store.state.count 变化的时候，都会重新求取计算属性，并刷新界面。

需要注意的是如果你把 store.state.count 放在data中， store.state.count 的变化是不会主动触发直接访问带store对象的，所以这样写五一是会报错的。

这种模式依赖于全局的管理员 store ，如果模块多了，意味着每个模块或者页面只要用到了这个state里面的数据，都得把store一如进来，这样的操作确实有点难受。当然，官方肯定是不允许有这样难受的操作出现的：

Vuex 通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用Vue.use(Vuex)）;

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
    }
  }
} 

• Vuex 的状态固然好用，但是也不要滥用：

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