09vuex

state

大白话：获取state的值

vuex中state数据是响应式的。只要state中数据发生变化。vue组件自动更新。

要想做到响应式

前提：是在mutaion中定义函数修改state值。

最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，使用 Vue.set(obj, 'newProp', value)就是响应式

info: {
      name: 'kebe',
      age: 40,
      height: 1.98
    }

//下面
state.info.name='old-old-kebi' //修改已有的值还是响应式
state.info.address='beijing'//增加新的属性和值。该属性不是响应式。state.info确实增加了adderss属性。但是html试图不会发生变化。
state.info['id']=100 //不是响应式
Vue.set(state.info,'sex','男') //通过vue.set()增加属性和值就是响应式的

mapState

不管用不用mapState辅助函数，vue当前实例访问store.state数据都是在 cumputed计算属性内。

注意：进入到计算属性computed的属性。vue实例可以直接使用。同data数据一样。

mapState通过扩展运算符将store.state.属性映射this.属性 this.指代当前vue实例对象。

//store.js
state: {
    count: 100,
    str: 'abc',
    student: [
      { name: 'zs', age: 10 }, 
      { name: 'lisi', age: 30 },
      { name: 'ww', age: 30 },
      { name: 'zq', age: 20 }
    ]
  },

没用mapState之前 **当前vue实例取store.state.属性** 数据是这样的
//computed
count(){
    return this.$store.state.count
},
str(){
        return this.$store.state.str
},
 student(){
            return this.$store.state.student
 },

import { mapState, mapMutations, mapGetters } from "vuex";
//方式1数组形式。这样当前vue实例上就有了count，str,student属性。值就是对应的值。
...mapState(['count','str','student']),
    
//方式2对象形式 不一定要同名  
 //不可以这样写 ...mapState({ count，str， student}),
  ...mapState({ count: "count", str: "str", student: "student" }),
    
//或者 `state => state.count` 等同于 上面的'count'
...mapState({ count: state => state.count, student: "student" }),

getters

大白话：获取state的值

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性computed）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getters里面函数fn形参依次是（state,getters）最多只接受两个参数。

getters: {
    //getters里面的方法接收一个state参数，指向state，可直接调用state中的数据
    getMore20(state){
        //直接返回一个值
      return state.student.filter(element=>element.age>20)
    },
    //getters 也可以接受其他 getter 必须是作为第二个参数：
    getMore20Length(state,getters){
        //直接返回一个值
      return getters.getMore20.length
    },
     // 用户想传参就返回一个函数
    getMoreAge(state) {
        //返回一个函数。
      return age => state.student.filter(element => element.age > age)
    },
        
     getMoreAgeLen(state,getters){
         // return getters.getMoreAge.length
          return age=>state.student.filter(element=>element.age>age).length
     },
  }

不用mapgetters

computed: {
  getMore20() {
      return this.$store.getters.getMore20;
    },
    getMore20Length() {
      return this.$store.getters.getMore20Length;
    },
    getName() {
      return this.$store.getters.getName;
    },
    getMoreAge() {
      return this.$store.getters.getMoreAge;
    },
    getMoreAgeLen() {
      return this.$store.getters.getMoreAgeLen;
    },
}

use

import {mapGetters } from "vuex";

...mapGetters({
    getMore20:'getMore20',
    getMore20Length:'getMore20Length',
    getMoreAge:'getMoreAge',
    getMoreAgeLen:'getMoreAgeLen'
}),
//数组写法
...mapGetters(['getMore20','getMore20Length','getMoreAge','getMoreAgeLen',]),

<h4>{{getMore20}}</h4>
<h4>{{getMore20Length}}</h4>
<h3>{{getMoreAge(20)}}</h3>
<h3>{{getMoreAgeLen(20)}}</h3>

mutions

大白话：同步修改state的值 写在vue 实例methods里面

更改 Vuex 的 store 中的状态（值）的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件 methods：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

add是事件类型。

一条重要的原则就是要记住 mutation 必须是同步函数

//store.js 在mutations中修改state

mutations: {
    add(state){
      state.count+=5
    },
    decrease(state){
      state.count-=5
    },
    // 提交载荷(接受其他参数),在大多数情况下,载荷是一个对象
    addNum(state,payload){
      state.count+=payload.num
    },
    decreaseNum(state,payload){
      state.count-=payload.num
    },
}

不用mapMutation。在methods里面通过this.$store.commit('xxx') 提交 mutation

 add(){
      this.$store.commit('add')
    },
    decrease(){
      this.$store.commit('decrease')
    },
        //注意：是在这里提交payload和mapMutation提交payload位置不同
    addNum(){
      this.$store.commit('addNum',{num:this.num}) //num是自己从data里面取出来的，
    },
    decreaseNum(){
      this.$store.commit('decreaseNum',{num:this.num})
    },

<button @click="add">add</button>
<button @click="decrease">jianfa</button>
<button @click="addNum">addNum</button>
<button @click="decreaseNum">decreaseNum</button>

mapMutation

使用mapMutation 同样两种方式。优先选择对象方式。

//对象方式
...mapMutations({
    add:'add',
    decrease:'decrease',
    addNum:'addNum',
    decreaseNum:'decreaseNum'
})
//数组方式
...mapMutations(['add','decrease','addNum','decreaseNum'])

使用注意payload是在html中传的。

<button @click="add">add</button>
<button @click="decrease">jianfa</button>
<button @click="addNum({num:10})">addNum</button> //留心payload
<button @click="decreaseNum({num:10})">decreaseNum</button>

使用常量替代 Mutation 事件类型

// mutation-types.js
const ADD = 'add'
const SUB = 'sub' // 减少
export { ADD, SUB }

 
 //store.js
import { ADD, SUB } from '@/store/mutation-types'
 //  ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [ADD](state, payload) {
      state.count = state.count + payload.step
    },
    [SUB](state, payload) {
      state.count = state.count - payload.step
    }
 

home.vue使用
import { ADD, SUB } from '@/store/mutation-types'
 methods: {
    ...mapMutations({
      add: ADD,
      sub: SUB
    }),
   handleAddClick() {
      this.add({ step: 10 }) // 是this.$store.commit('add', { step: 10 })简写
      // this.$store.commit(ADD, { step: 10 }) // 不借助mapMutations
    },
    handleAddClickSub() {
      this.sub({ step: 30 })
    }
  }

actions

action配合promise

action组合

posted on 2020-06-11 17:41 章画阅读(176) 评论(0) 编辑收藏举报

刷新页面返回顶部

章画