美文网首页
vuex初理解

vuex初理解

作者: 爱吃西瓜的勺子 | 来源:发表于2020-08-23 12:22 被阅读0次

一、准备工作

1.安装vuex
npm install vuex --save
2.创建vuex
import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

const state = {
  cartList: []
}

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

export default store
3.注入(main.js)

可通过this.$store 使用

new Vue({
  el: '#app',
  store
})

二、state

取数据
this.$store.state.count
辅助函数:mapState

1.数组形式

映射的计算属性的名称与 state 的子节点名称相同

import {mapState} from 'vuex'
export default {
  name: 'home',
  computed: mapState(['username','age'])
}
//相当于
computed:{
  username(){return this.$store.state.username},
  age(){return this.$store.state.age},
}

2.对象形式

对象形式可以自定义计算属性名称

import { mapState } from 'vuex'
export default {
 computed:mapState({
          count: 'count',//state中的count
          name: (state) => state.name,//state中的name
          // 为了能够使用 `this` 获取局部状态,必须使用常规函数
          countPlusLocalState (state) {
            return state.count + this.localCount //返回经过处理的count
          },
          getMore(state){
            return 'more'+state.name;//返回处理过的name
          },
          localComputed(){
              return '我是局部计算属性';//局部计算属性
          }
    })
        console.log(this.count);
        console.log(this.name);
        console.log(this.getMore);
        console.log(this.localComputed);
image.png

理解countPlusLocalState和getMore:本来是直接取得state中定义的数据(count和name),但是有时候也需要把数据做处理后再使用。所以可以自定义一个计算属性名,然后在mapState中取得state对象,把通过state取到的数据做进一步处理后再赋值给计算属性。这样就可以直接用this.getMore和this.localComputed来调用经过处理的数据了。

理解 localComputed:如果该组件有自己的计算属性,也可以写在mapState中,最后也会被映射到计算属性中。即既能映射取到state属性值的函数,也能映射普通函数。但是不推荐这种写法,而是使用对象展开运算符,将mapState中的属性混入到computed中。(如下面第三点展示)

注意如果要取组件实例的数据,就不能使用箭头函数,箭头函数中this并不是指向vue组件实例

3.与局部计算属性混合使用

对象
computed: {
  localComputed () {},
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
数组
computed: { 
  getValue(){
   return this.val/7
  },
  ...mapState(['username','age'])
}
补充

对象展开运算符

let MapState = mapState({
      count: 'count',
      sex: (state) => state.sex
    })
    let json = {
      'a': '我是json自带的',
      ...MapState
    }
    console.log(json)

相关文章

  • vuex初理解

    一、准备工作 1.安装vuex 2.创建vuex 3.注入(main.js) 可通过this.$store 使用 ...

  • vuex初理解-下

    三、getters 有时候我们需要对state中的数据做一些处理,方便使用。如果多个组件中都需要数组的长度,那就可...

  • vuex入门教程

    之前理解了eventbus事件总线,vuex就会好理解一点;1.npm install vuex --save ...

  • vuex理解

    一、区别: 1、传统或vue页面: 2、vuex页面 说明为了更明确地追踪到状态的变化,函数的执行不走普通的函数调...

  • vuex 理解

    6.1. vuex 理解 6.1.1. vuex 是什么 1)github 站点:https://github.c...

  • Vuex 理解

    我们可以用公司举个例子:公司有个仓库1.State(公司的仓库)2.Getter(只能取出物品,包装一下,不能改变...

  • Vuex与session具体区别

    vuex 与 (sessionStorage 、localStorage)区别 首先,理解vuex的作用 每一个 ...

  • vue - vuex 的安装与使用

    1 vuex的安装 2 vuex的使用 2.1 vuex的核心模块: State: 单一的静态树, 可以理解为定义...

  • 教你快速明白和搭建Vuex工作环境

    vuex工作工作原理(写给自己看的笔记以加深自己的理解) 一、Vuex工作原理 首先我们先来了解下Vuex: 1...

  • 快速理解Vuex

    Vuex 一句话概括:state是数据源,mutation/action触发修改数据(getter封装数据),将s...

网友评论

      本文标题:vuex初理解

      本文链接:https://www.haomeiwen.com/subject/xnlijktx.html