vue如何取store中的值,Store、State、Getter

vue如何取store中的值,Store、State、Getter插图

Store 及基本使用

Store 就是一个单一状态管理容器;

Store 中可以配置 State、getter、mutation 等属性,而Store 的属性涵盖了对一个数据的初始化、获取及更新操作。

Store 维护了一套响应式的状态存储机制,也就是当 Store 的数据发生变化是,会通知 Vue 组件,进行响应式的更新。

定义一个 Store 的过程基本如下:

引入 Vue 及 Vuex,并启用 Vuex:

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

Vue.use(Vuex);

一定要确保 Vue.use(Vuex);new Vuex.Store({}) 之前调用, 否则你会收到这样一个错误:

[vuex] must call Vue.use(Vuex) before creating a store instance.

定义 Store 的 state:

const state = {
  count: 0
}

定义 Store 的 getters:(如果需要)

const getters = {
  getCount(state) {
    return state.count;
  }
}

这样可以不通过 this.$store.state.count 的形式访问,而是可以通过 this.$store.getters.getCount 的形式访问(当然还有更简洁方式),出了访问方式变动之外,可以在函数中进行一系列操作,然后在返回数据。

定义 Store 的 mutations:

const mutations = {
  increment(state){
    state.count ++ ;
  }
}

getters 是获取数据,而 mutations 则是显示的对数据进行更改。 Store 的 state 是不允许通过 this.$store.state.count = 2 的形式去修改的,必须显示的提交修改才能去执行修改。

提交修改的方式是 this.$store.commit(mutationName)

将 state、getters 以及 mutations 作为初始化内容传入 new Vuex.Store({}):

const store = new Vuex.Store({
 state,
 getters,
 mutations
});

export default store;

最后将 store 导出,然后在 new Vue({}) 的地方引入,挂载到 store 属性下即可。

import store from './store';

new Vue({
  el: '#app',
  router,
  store,
  render: (c) => {return c(App)}
});

state

Vuex 是一个单一的状态树来管理状态,而 Store 则是Vuex 的存储仓库,每个 Store 中真实表示数据或者状态的则是 Store 的 state 属性。

如果熟悉 React 则就无需强调什么是 state 了, 所有的数据初始化定义都应该在 state 中定义,并且获取数据也可以从 state 中取,只是无法直接去更改某个 state 的值。

比如在模板中读取某个 state 的值的方式:

<p>count is: {{this.$store.state.count}}</p>
console.log(this.$store.state.count)

而在如果你没有使用 getters 的话,一般也会推荐将 state 的值初始化给组件computed 的某个属性,能够简化很多 this.$store.state.xxx 的代码。

比如我将state.count 赋值给 computed 中的 count

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

这样在模板中我可以直接使用 count:

<p>count is: {{count}}</p>

mapState

我本人不觉得 mapState 有什么特别大的帮助,只是在开发上可能少写点代码而已

使用 mapState 需要首先从 vuex 中引入

  import {mapState} from 'vuex';

即使每次初始化 computed,也需要写大量的 this.$store.state.xx 因此 vuex 暴露一个 mapState 的属性,用来边界开发,尤其是将 state 的值初始化给 computed 的时候:

  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

上面 computed 的定义中,直接是运行了 mapState 方法, 然后参数是一个对象:

  • count: state => state.count:定义一个 computed:count,通过一个函数传入 state 参数,并返回 state.count
  • countAlias: 'count', 直接对 state.count 进行重命名
  • countPlusLocalState (state) { return state.count + this.loca.... } 如果需要获取 本组件的一些状态,则必须使用常规函数的形式,并且将 state 传入函数,其中可以通过 this.xxx 获取局部状态。

如果想直接用 state 的名称,可以直接给 mapState 传一个数组:

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

而如果本地也有 computed 数据,然后也需要 state 初始化一些本地数据,借助 mapState 实现的话,需要进行对象展开符,当然,mapState 该怎么用还是怎么用,与上面一样。

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Getters

getters 只是为了更加方便的获取数据,比如一个 count state,如果不同的组件需要不同结果的 count,则一般都是由业务组件去做这个事情,而 store 也可以把这个事情给做掉。

举例:我需要在每个 state.count 的值前面,在加上一个 state.num,组合成一个新的值给多个组件使用。

如果组件完成这个事情,则需要有组件去实现,(包括金钱、时间的格式化,内容过滤等操作),而通过 getter 则可以提供统一的访问形式。

1、getter 的定义及基本使用

getter 的定义也很简单,定义某个属性,方法中形参是 state:

  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

通过传入的 state 参数,可以访问当前 store 的状态,进行一系列的判断过滤等。

2、多个 getter 配合

getter 也可以结合其他的 getter 一起使用,getter 定义的第二个参数可以是其他 getter:

getters: {
  doneTodos: state => {
      return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

上面的例子中,首先我已经定义完了 doneTodos 这个 getter,但是比如我还需要获取完成的 todo 的数量,如果我还是使用 state 的话,我还需要写一遍遍历判断最后计数。

而我直接使用当前 getters.doneTodos.length 就不需要再去写那些代码了。

3、getter 传参

除此之外,还可以通过方法访问 getters,所谓的方法访问无非就是传递参数,来进行不同的预期处理:

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

比如上面的 getters 支持通过 id 查找 todo,并且返回。

当定义好之后,就能够直接通过下面的方式查找需要的 todo:

this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

而这种定义方式,无非就是一个科里化,没有什么新奇的玩意儿。

4、mapGetter

mapGetter 的使用需要首先引入 import { mapGetters } from 'vuex'

mapGetter 如同 mapState 一样,没什么特别新奇的功能,也是一种辅助作用,写代码比较轻松,必须要写那么多的 this.$store.getters.name

而使用的形式也非常类似于 mapState

  computed: mapGetter({
    // 箭头函数可使代码更简练
    count: getters=> getters.getCount,

    // 传字符串参数 'count' 等同于 `getters=> getters.getCount`
    countAlias: 'getCount',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (getters) {
      return getters.getCount+ this.localCount
    }
  })
}

以上内容来自:http://www.ptbird.cn/vuex-use-some-env.html

版权声明:
作者:北忘山
文章:vue如何取store中的值,Store、State、Getter
链接:https://www.beiwangshan.com/archives/270.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>