核心概念 mutations

掌握mutations的操作流程，来修改state数据（state数据的修改只能通过mutations）

步骤：提供方法调用

index.js


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

Vuex.use(Vuex)

const store = new Vuex.Store({
    //严格模式（有利于初学者检测不规范代码）
    strict:true,
    //通过state可以提供数据
  state: {
    title: '大标题',
    count: 100
  },
  //通过 mutations可以提供修改数据的方法
  mutatinos:{
    //所有mutations函数，第一个参数都是state
    addCount(state){
        //修改数据
        state.count +=1
    }
  }

})

export default store

mutations传参语法

  mutatinos:{
    //所有mutations函数，第一个参数都是state
    addCount(state, n){
        //修改数据
        state.count +=n
    }
  }

若多个则可改用为数组

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd (n) {
      this.$store.commit('addCount',n)
    }

  }
}
</script>

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd (n) {
      this.$store.commit('addCount',n)
    }

  }
}
</script>

  //通过 mutations可以提供修改数据的方法
  mutatinos:{
    //所有mutations函数，第一个参数都是state
    addCount(state, n){
        //修改数据
        state.count +=n
    },
    changeCount(state,newCount){
      state.count=newCount
    }
  }

辅助函数mapMutations

相当于把微云 mutations中的方法提到methods中

核心概念-actions

主要为等待秒数后执行操作即异步

1.先在son1.js下设置一个按钮

<button>一秒后修改成666</button>

2.actions处理异步 注意不能直接操作state ，操作state，还是需要commit mutation

  actions:{
  //context 上下文（此处未封模块，可以当成store仓库）
  //context。commit（'mutation名字'，额外参数）
    changeCountAction(context,num){
      context.commit('changeCount',num)

    }
  }

3.异步操作

  actions:{
    changeCountAction(context,num){
      context.commit('changeCount',num)
      //这里时setTimeout模拟异步，以后大部分场景是发请求
      setTimeout(()=>{
        context.commit('changeCount',num)
      },1000)

    }
  }

4.在son1.js中提交actions

 <button @click="handleChange">一秒后修改成666</button>

methods: {
    handleAdd (n) {
      this.$store.commit('addCount',n)
    },
    handleChange(){
    //调用action
    //this.$store.dispatch('action名字'，额外参数）
      this.$store.dispatch('changeCountAction',666)
    }

  }

辅助函数-mapActions

<template>
  <div class="box">
    <h2>Son2子组件</h2>
    从vuex中获取的值：<label for="">{{ count }}</label>
    <br>
    <button>值-1</button>
    <button @click=" changeCountAction(888)">一秒后修改成888</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count'])

  },
  methods:{
   ...mapActions(['changeCountAction'])
  }
}
</script>

核心概念 -getters

getters 类似于计算属性

  getters:{
    filterList(state){
      return state.list.filter(item => item > 5)
    }
  }

映射方法在methods中写mapmutations mapActions

映射属性在computed中写mapgetters

核心概念-模块 module

创建模块

新建文件夹

创建模块

const state = {
    userInfo:{
        name:'zs',
        age:18
    },
    score:80
}
const mutations = {}
const actions = {}
const getters = {}

export default{
    state,
    mutations,
    actions,
    getters
}

根组件中导入挂载

import users from './moudles/user'

访问模块 纯原生

  <div>{{ $store.state.user.userInfo.name }}</div>

映射

<template>
  <div class="box">
    <h2>Son2子组件</h2>
    从vuex中获取的值：<label for="">{{ count }}</label>
    <br>
    <button>值-1</button>
    <button @click=" changeCountAction(888)">一秒后修改成888</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count', 'user'])

  },
  methods:{
   ...mapActions(['changeCountAction'])
  }
}
</script>

<style lang="css" scoped>
.box{
    border: 3px solid #ccc ;
    width: 400px;
    padding: 10px;
    margin: 20px;
}
h2{
    margin-top: 10px;
}
</style>

访问

    <div>{{ user.userInfo.name }}</div>

子模块的映射

...mapState('user',['userInfo'])

访问getters中的数据

原生

在getters中提供数据

const state = {
    userInfo:{
        name:'zs',
        age:18
    },
    score:80
}
const mutations = {}
const actions = {}
const getters = {
    UpperCaseName(state){
        return state.userInfo.name.toUpperCase()
    }
}

export default{
    state,
    mutations,
    actions,
    getters
}

  <div>{{ $store.getters['user/UpperCaseName'] }}</div>

辅助函数映射

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count', 'user'])
    ...mapGetters(['user',['userInfo']])

  },
  methods:{
   ...mapActions(['changeCountAction'])
  },
 
}
</script>

mutation的调用语法

按钮

全局模块和分模块映射

vuex中核心概念及模块