码迷，mamicode.com
首页 > 其他好文 > 详细

vuex

时间：2019-12-19 23:28:08      阅读：82      评论：0      收藏：0      [点我收藏+]

标签：info   href   turn   context   总结   ted   新建   特殊   getters   

本文的学习来自技术胖大神的教程：https://jspang.com/ 

 

1第一个实例--用vuex实现数据的共享

新建一个vuextest的项目：vue init webpack 项目名

安装vuex：

npm install vuex --save

技术图片

 

新建一个vuex文件夹，在文件夹下新建store.js文件，文件中引入vue和vuex。

增加一个常量对象。

用export default 封装代码，让外部可以引用。

 技术图片 

技术图片

 

在components文件夹下新建count.vue。在模板中引入store.js文件，并在模板中用$store.state.count输出count 的值。

技术图片 

 技术图片

 

然后在store.js文件中加入两个改变state的方法。

技术图片

 

完整代码：

router/index.js：

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import Count from ‘@/components/count‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path: ‘/count‘,
      name: ‘count‘,
      component: Count
    }
  ]
})

 

vuex/store.js：

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

const state={
    count:1
}

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,mutations
})

 

count.vue：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />
        <h3>{{$store.state.count}}</h3>
        <div>
            <button @click="$store.commit(‘add‘)">+</button>
            <button @click="$store.commit(‘reduce‘)">-</button>
        </div>
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store    
}
</script>

<style>
</style>

 

2 state访问状态对象

const state 就是访问状态对象，它就是SPA（单页应用程序）中的共享值。

把stroe.js中的值，赋值给模板里data中的值有三种赋值方式：

 

1）通过computed的计算属性直接赋值

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

 

2）通过mapState的对象来赋值

import {mapState} from ‘vuex‘
computed:mapState({
    count:state=>state.count
})

 

3）通过mapState的数组来赋值 

import {mapState} from ‘vuex‘
computed:mapState([‘count‘])

技术图片

 

完整代码：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />
        <h3>{{$store.state.count}}</h3>
        <h3>{{count}}</h3>
        <div>
            <button @click="$store.commit(‘add‘)">+</button>
            <button @click="$store.commit(‘reduce‘)">-</button>
        </div>
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store,
        //第一种方式
        /*computed:{
            count(){
                return this.$store.state.count
            }
        }*/
        //第二种方式
        /*computed:mapState({
            count:state=>state.count
        })*/
        //第三种方式
        computed:mapState([‘count‘])
    }
</script>

<style>
</style>

技术图片

 

技术图片

 

3 Mutations修改状态

上面的例子中，定义的mutations就是改变状态，

技术图片 

mutations这个单词的意思是“突变”。里面定义的两个方法就是为了改变state中的count的状态。

也就是说，mutations存在的意义就是要写方法来改变数据的状态。

实际开发中，不会这么简单，可能会涉及到传值，

 

例：修改add方法，每次加10

add(state,n){
    state.count+=n;
},

技术图片

 

方法调用时：

<button @click="$store.commit(‘add‘,10)">+</button>

技术图片 

技术图片

 

add中的参数，第一个可以理解为默认的，就是要操作的数据，后面的参数需要在方法调用时传入，

$store.commit的参数，第一个是方法名，后面的是要传入的参数。

这里有点别扭，需要特殊记一下。

 

$store.commit这种方式很繁琐，可以简化：

引入mapMutations，然后在methods中把add和reduce传进去。

 

count.vue完整代码：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />        
        <h3>{{count}}</h3>
        <div>
            <button @click="add(10)">+</button>
            <button @click="reduce">-</button>
        </div>
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState,mapMutations} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store,        
        computed:mapState([‘count‘]),
        methods:mapMutations([‘add‘,‘reduce‘])        
    }
</script>

<style>
</style>

 

4 getters计算过滤操作

getters相当于在vuex中的computed。每操作一次数据，都会经过getters过滤一遍，相当于一个“安检”。 

例：

在store.js声明getters：

const getters={
    count:(state)=>{
        return state.count+=100;
    }    
}

并引入：

技术图片

 

模板中也是写到computed中，但是已经有一个mapState([‘count‘])了，所以需要用到扩展运算符...

computed:{
    ...mapState([‘count‘]),
    count(){
        return this.$store.getters.count;
    }
},

 

最好简写：

引入mapGetters，然后...mapGetters([‘count‘])

 

完整代码：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>        
        <h3>{{count}}</h3>
        <div>
            <button @click="add(10)">+</button>
            <button @click="reduce">-</button>
        </div>
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState,mapMutations,mapGetters} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store,        
        computed:{
            ...mapState([‘count‘]),
            ...mapGetters([‘count‘])
        },        
        methods:mapMutations([‘add‘,‘reduce‘])        
    }
</script>

<style>
</style>

技术图片

 

 技术图片 

5 Actions异步状态

Mutations是同步修改状态，Actions是异步的，

在store.js中定义一个actions，写两个方法，传入的参数是context，叫上下文对象，就相当于store.js这个文件。用context调用mutations中的add方法，再写reduceAction方法，传一个commit对象，然后用commit调用reduce方法。然后在模板中写methods。

 

完整代码：

store.js：

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

const state={
    count:1
}

const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

const getters={
    count:(state)=>{
        return state.count+=100;
    }    
}

const actions={
    addAction(context){
        context.commit(‘add‘,10);
    },
    reduceAction({commit}){
        commit(‘reduce‘);
    }
}

export default new Vuex.Store({
    state,mutations,getters,actions
})

 

count.vue：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>        
        <h3>{{count}}</h3>
        <div>
            <button @click="add(10)">+</button>
            <button @click="reduce">-</button>
        </div>
        
        <div>
            <button @click="addAction">+</button>
            <button @click="reduceAction">-</button>
        </div>
        
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState,mapMutations,mapGetters,mapActions} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store,        
        computed:{
            ...mapState([‘count‘]),
            ...mapGetters([‘count‘])
        },        
        methods:{
            ...mapMutations([‘add‘,‘reduce‘]),
            ...mapActions([‘addAction‘,‘reduceAction‘])
        }
    }
</script>

<style>
</style>

 

为了体现出异步，在actions中写一个延迟，然后在settimeout后面写一些代码，如果后面的代码先执行了，就说明是异步的。

addAction(context){        
    context.commit(‘add‘,10);
    setTimeout(()=>{
        context.commit(‘reduce‘);
    },5000);
    console.log(‘这里打印了说明是异步的‘);
},

技术图片 

 技术图片

 

6 vuex模块组 

如果项目不是特别的复杂，不建议用模块组。 

声明模块组，然后修改原来 Vuex.Stroe里的值。在模板中用插值的形式写入。如果想用简单的方法引入，在计算属性中rutrun状态。

 

完整代码：

store.js:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

const state={
    count:1
}

const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

const getters={
    count:(state)=>{
        return state.count+=100;
    }    
}

const actions={
    addAction(context){        
        context.commit(‘add‘,10);
        setTimeout(()=>{
            context.commit(‘reduce‘);
        },5000);
        console.log(‘这里打印了说明是异步的‘);
    },
    reduceAction({commit}){
        commit(‘reduce‘);
    }
}

const moduleA={
    state,mutations,getters,actions
}

export default new Vuex.Store({
    modules:{a:moduleA}
})

 

count.vue:

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>        
        <h3>{{count}}</h3>
        <h3>{{$store.state.a.count}}</h3>        
        <div>
            <button @click="add(10)">+</button>
            <button @click="reduce">-</button>
        </div>
        <br/>
        <div>
            <button @click="addAction">+</button>
            <button @click="reduceAction">-</button>
        </div>
        
    </div>
</template>

<script>
    import store from ‘@/vuex/store‘
    import {mapState,mapMutations,mapGetters,mapActions} from ‘vuex‘
    
    export default{
        data(){
            return{
                msg:‘Hello Vuex‘
            }
        },
        store,        
        computed:{            
            count(){
                return this.$store.state.a.count; 
            }
        },        
        methods:{
            ...mapMutations([‘add‘,‘reduce‘]),
            ...mapActions([‘addAction‘,‘reduceAction‘])
        }
    }
</script>

<style>
</style>

 

vuex总结：

实际项目中登录状态、访问状态都需要用到vuex来管理状态。但是不要过度使用，能用参数传递时还是用参数传递。如果一个数据在很多地方都要用到，而且要管理状态，再用vuex。

vuex

标签：info   href   turn   context   总结   ted   新建   特殊   getters   

原文地址：https://www.cnblogs.com/hzhjxx/p/12070439.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！