Vuex的基础

目录

1、Vuex的由来

2、Vuex介绍

3、vuex初始化功能

4、vuex基础-state

5、vuex基础-mutations 同步更新

6、vuex基础-actions

7、vuex基础-getters

8、vuex中的模块化

---

1、Vuex的由来

        （1）大多数场景下的组件并不是独立存在的，而是相互协作共同构成一个复杂的业务流程

        （2）组件中的通信成为了必不可少的开发需求

                父------->子 props

                子------->父 $emit

                兄弟------->兄弟 eventBus---->公共$emit

                        孙子-------->爷爷 非关系型组件 vuex

2、Vuex介绍

        Vuex采用集中式管理组件依赖的数据共享工具，可以解决不同组件之间数据共享的问题

        组件调用action------>执行异步操作，数据提交给mutations进行修改------->修改state必须通过mutations只能执行同步代码------->共享状态数据

3、vuex初始化功能

        （1）建立一个新的脚手架项目，在项目中应用vuex

        （2）初始化

                第一步：npm i vuex -S 安装运行依赖

                第二步：在main.js 中引入 import Vuex from 'vuex'

                第三步：Vue.use(Vuex) 注册Vuex的功能 实际调用Vuex中的一个install方法

                第四步：const store=new Vuex.Store({}) 实例化一个Vuex

                第五步：

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

4、vuex基础-state

        state是存放所有公共状态的属性，如果你有一个公共状态的数据，可以存放在state中

原始形式

App.vue

    <div>原始状态{{ $store.state.count}}</div>

计算属性 

将state定义在计算属性中

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

<div>计算属性{{ count}}</div>

辅助函数 mapState

帮助我们将store中的数据映射到计算属性中，它属于一种方便用法

第一步：引入辅助函数

import {mapState} from 'vuex'

第二步：采用数组形式引入state属性

 ...mapState(['count','age'])

5、vuex基础-mutations 同步更新

一次mutations 执行，立刻得到一种数据视图

原始形式

  mutations:{
    //修改state的mutations方法  
    //state指当前的vuex中的state对象
    //payload  载荷 提交mutations时传递的参数  
    addCount(state,payload){
        state.count+=payload
    }
  }

<template>
    <div>
       <button @click="test">+1(原始形式)</button>
    </div>
</template>

<script>
    export default {
        methods:{
           test(){
                this.$store.commit("addCount",1)
            }
        }
    }
</script>

辅助函数  mapMutations

<div>
      <!-- vue中方法的默认第一个参数 事件参数对象 -->
      <button @click="addCount(100)">+100</button>
</div>

//此时组件中会拥有一个addCount函数
    ...mapMutations(["addCount"]),

6、vuex基础-actions

state存取数据，mutations同步更新数据，actions负责进行异步操作

定义actions

// /异步操作  从后端获取一个数 更新state到count中
    actions: {
      // context相当于this.$store store的运行实例
      getAsynCount(context) {
        // 模拟异步请求
        setTimeout(function () {
          //获取的值
          context.commit("addCount", 10)
        }, 1000)
      }
    }

原始调用

test1(){
      // commit提交mutations  dispatch调用action
      this.$store.dispatch("getAsynCount")
    }

传参调用

test1(){
      // commit提交mutations  dispatch调用action
      // this.$store.dispatch("getAsynCount")
      this.$store.dispatch("getAsynCount",123)
    },

 getAsynCount(context,params) {
      // 模拟异步请求
      setTimeout(function () {
        //获取的值
        context.commit("addCount", params)
      }, 1000)
    }

辅助函数 mapActions 可以将action导入组件中

 ...mapActions(['getAsynCount']) //引入异步action

<div><button @click="getAsynCount(1345)">异步调用</button></div>

7、vuex基础-getters

定义getters

getters:{
    //放置所有的vuex的计算属性
    // state指向当前store中的state
    // filterList:function(state){
    //    return state.list.filter(item =>item>5)
    // }
    filterList:state=>state.list.filter(item =>item>5)
  }

使用getters

原始方式 $store

<div>{{$store.getters.filterList}}</div>

辅助形式 mapGetters

computed:{
    //将getters中的计算属性导入组件的计算属性中
    ...mapGetters(['filterList'])
  }

8、vuex中的模块化

        8.1 为什么使用模块化？

                所有的数据、更新、操作都在一起，项目越大，越难维护

        8.2 模块化的简单应用

原始方式

//放置子模块的属性
  modules:{
      user:{
        state:{
          token:'12345'
        }
      },
      setting:{
        state:{
            name:'vuex实例'
        }

      }
  }

 <div>token:{{$store.state.user.token}}</div>
 <div>username:{{$store.state.setting.name}}</div>

快捷方式 辅助函数

 getters: {
    token: state => state.user.token,
    name: state => state.setting.name,
  },

import {mapGetters} from 'vuex'
    export default {
        computed:{
            ...mapGetters(['token','name'])
        }
    }

        <div>快捷访问 {{token}}</div>
        <div>快捷方式{{name}}</div>

        8.3 模块化的命名空间

namespaced:true,
//子模块 
mutations:{
        updateToken(state){
            state.token='897987'
        }
      }

第一种 原始路径

  updateToken(){
                this.$store.commit('user/updateToken')
            }

第二种 辅助函数

methods:{
            ...mapMutations(['user/updateToken']),
            update(){
                this['user/updateToken']()
            }
    }