Vuex教程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex教程相关的知识,希望对你有一定的参考价值。

一、概览
1、Vuex是什么

  • 专为Vue.js应用程序开发的状态管理模式(状态即数据,即数据管理)
  • 采用集中式存储管理应用的所有组件的状态
  • 以相应的规则保证状态以一种可预测的方式发生变化
    2、状态
  • 组件内部状态:仅在一个组件内使用的状态( 即data字段里的数据,不能共享,只在本组件使用 )
  • 应用级别状态:多个组件共用的状态(将这个状态放入vuex中进行管理)
    3、什么情况下使用Vuex
  • 多个视图(组件)依赖同一状态
  • 来自不同视图(组件)的行为需要变更同一状态

二、Vuex核心概念
1、store:类似容器,包含应用的大部分状态

  • 一个页面只能有一个容器
  • 状态存储是响应式的
  • 不能直接改变store中的状态,唯一途径显示地提交mutations
    2、State:包含所有应用级别状态的对象
    3、Getters:在组件内部获取store中状态的函数
    4、Mutations:唯一修改状态的事件回调函数,默认是同步的,如果要异步就使用Actions
    5、Actions:包含异步操作、提交mutations改变状态
    6、Modules:将store分割成不同的模块

三、案例

**index.js**

let store = new Vuex.Store({
    state:{  //对象,应用所需要的状态数据都放在这里面
        count:100
    },
    mutations:{  //对象,显示的同步提交mutations
        addIncrement(state,payload){  //这里是自定义addIncrement事件
            state.count+ = payload.n
        }
    },
    actions:{
        addAction( context ){  //这里新加自定义事件addAction
            setTimeout( ()=>{  /模拟异步操作
            //改变状态,提交mutations,仍然是上面mutations里面定义的事件addIncrement
                context.commit(‘addIncrement‘,{n:15})
                context.dispatch(‘textAction‘,{test:‘测试‘})  //这里执行该异步操作
            },1000 )
        },
        textAction(context,obj){  //定义第二个异步操作
            console.log(obj)  //{test:‘测试‘}
        },
        getListAction( context ){  //这里定义了异步接口action,在子组件created里面调用
            axios.get(‘url‘)
            .then( (data)=>{
                console.log(data);  //得到了接口数据
            } )
        }
    },
    getters:{  //对store里面的数值进行逻辑操作
        filterState(state){
            return state.count>=120?120:state.count
        }
    }
})
export default store

**increment组件:**

<template>
    <p>{{num}}</p>
    <span>{{filterNewNum}}</span>
    <input type="button" value="+" @click="addHandle" />
</template>
<script>
    computed:{
        num(){
            rerurn this.$store.state.count
        },
        filterNewNum(){  //这里面接收过滤后的,仓库里面的数据
            return this.$store.getters.filterState //注意是return,不要漏了
        }
    },
    methods:{
        addHandle(){  //改变状态,提交mutations
            this.$store.commit(‘addIncrement‘,{  //这里是commit addIncrement
                n:5                //参数
            });
        }
        //这里是异步触发一个action,注意和上面同步的不同之处
        this.$store.dispatch.commit(‘addAction‘) //这里是dispatch addAction
    },
    created(){
        this.$store.dispatch(‘getListAction‘);  //dispatch
    }
    也可以这样写:
    methods:{
        addHandle(){
            this.$store.commit({
                type:‘addIncrement‘,  //改变的状态类型
                n:5                             //参数
            })
        }
    }
</script>
//上面是同步操作数据,使用mutations,如果要异步操作数据,就用到Actions,注意,不管是同步还是异步操作,改变数据前都得先提交mutations
//向后端发送ajax请求就放在Actions里面。在methods里面创建方法,通过axios获取数据,然后更新到store里面定义的变量,这一系列操作都在index.js文件里面完成
  • 如果要对store里面的数值进行逻辑判断(数据过滤、数据的加减乘除),那么就用到getters,用法类似于计算属性computed,getters可以看做是Vuex的计算属性

  • 在Store仓库里,state就是用来存放数据,在Vue里面若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义。我们可以认为,【getters】是store的计算属性。因为getters是对数据进行逻辑运算,而不是新添加的方法或功能,仅仅是是数据的逻辑运算,所以要始终返回一个新值,可以先在getters下面的方法里面定义一个新值变量,经过计算,然后return出这个新变量

  • getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5+100

四、Vuex辅助函数
mapState
mapGetters
mapMutations
mapActions
改写上面的代码:

Increment.vue组件
<template>
    <p>{{count}}</p>
    <span>{{filterNum}}</span>
    <input type="button" value="+" @click="add" />
    <input type="button" value="-" @click="reduce({n:11})"/>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from ‘vuex‘
export default {
        data(){
        },
     computed:{
        abc(){
            return 123  //普通的计算属性
        },
        ...mapState([‘count‘])  //这里的count就是store里面定义的仓库里面的count
        ...mapGeters([‘filterNum‘])  //从getters里面取值(经过逻辑处理的值)
     },
    methods:{

        /*reduce(){  //同步触发action
            this.$store.commit(‘reduceAction‘,{n:5})  //同步每次减5
        }*/

        ...mapMutations({  //改写mutations,要传参,参数在模板里面添加reduce({n:11})
            reduce:‘reduceAction‘
        })

        /*add(){  //异步触发actions
            this.$store.dispatch(‘addAction‘)
        }*/

        ...mapActions({  //改写actions
            add:‘addAction‘
        })
    }
}
</script>

index.js
import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        addHandle(state,payload){  //payload是参数
            state.count+=payload.n;
        },
        reduceAction(state,payload){
            state.count-=payload.n
        }
    },
    actions:{
        addAction(context){
            setTimeout(()=>{
                context.commit(‘addHandle‘,{n:15})  //异步每次加15
            },1000)
        }
    },
    getters:{
        filterNum(state){
            return state.count>=102?102:state.count
        }
    }
})

export default store

五、在vue-cli里面使用Vuex
1、npm install vuex --save
2、在src目录下面新建store文件夹,里面新建index.js
3、store/index.js代码:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import axios from ‘axios‘
Vue.use(Vuex)
let store = new Vuex.Store({
    state:{
        shopCarData:[]  //购物车的数据默认数据格式是数组,使用Vuex对这个数组进行操作
    },
    mutations:{
        addShopCarData(state,data){
            //do something
        }
    },
    getters:{

    }
})
export default store

4、main.js代码

import store from ‘./store‘
new Vue({
    el:‘#app‘,
    router,
    store,
    template:‘<App/>‘,
    components:{
        App
    }
})

以上是关于Vuex教程的主要内容,如果未能解决你的问题,请参考以下文章

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vuex基础:教程与释义

Vuex基础:教程与释义

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家