Vue.js前端开发:Vuex使用心得

vue.js开发前端|前端开发框架 vue|vue 前端开发工具

今天我们简单说一下vuex的使用,vuex是什么呢,相当于react的redux,如果项目使用数据过多的话,直接管理是非常不方便的,那么采用vuex,那些繁琐的问题就迎刃而解了,首先我们先看看官方对vuex的说明:
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

说白了就是vue的状态管理,你只需要每次动态的改变这些状态就行,数据就会自动渲染,从第一步安装开始,
1、安装vue项目:
(1).vue init webpack Testporject
(2).cd Testporject
(3).npm i vuex –save
(4) npm run dev
这些指令就不用说了,作为一个vue开发者,如果不知道的话那就可以不用学了,前提是你需要依赖vue-cli,如果安装失败,那请先安装vue-cli 吧

2、vuex的引入
项目安装成功以后,初始的文件目录格式都是一样的:

然后我们简单的使用,在main.js中引入vuex
javascript 代码

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

记得一定要挂载使用它,就是这一句:Vue.use(Vuex)

3、在main.js中加入
javascript 代码

var store = new vuex.Store({ //store对象
    state: {
        count: 0
    }
})

4、把刚才的store对象实例化到Vue中
javascript 代码

new Vue({
    el: ‘#app’,
    router,
    store, //加入store对象
    template: ‘<App/>’,
    components: {
        App
    }
})

完成这一步我们就可以使用了,一个简单的vuex的state就可以了,怎么用呢
html 代码

<div id=”hello”>
    <p>{{$store.state.count}}</p>
</div>

5、很明显,刚才只是简单的一例子,如果你需要做大型的项目,不可能把store对象写在main.js里,这样是非常不方便管理的,所以我们需要在src下新建一个文件夹store专门存放store对象,然后我们新建一个文件index.js
javascript 代码

//index.js
import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);
export default new vuex.Store({
    state: {
        count: 0
    }
})

相应的main,js就需要做修改了
javascript 代码

import store from ‘./store/index’
new Vue({
    el: ‘#app’,
    router,
    store, //加入store对象
    template: ‘<App/>’,
    components: {
        App
    }
})

这样做就是为了把store对象分离出去,方便管理,但是你会发现这个store对象是全局的所有组件都可以使用,如果我们的组件多了,数据多了,全部堆放在一起,是不是特别臃肿,所以现在我们就该使用modules
首页我们新建一个js文件存放一个组件可能用到的store对象,比如我新建heade.js,在这里我们不需要引用vuex了,只需要默认export default就行了
javascript 代码

//heade.js
export default {
    state: {
        count: 0
    }
}

然后我们把在index.js中使用modules
javascript 代码

import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);
import HeadeStore from ‘./heade’; //引入刚才的heade.js
export default new vuex.Store({
    modules: {
        Heade: HeadeStore
    }
})

现在我们管理起来就方便多了,比如还有其他的呢我们放在modules下就可以了,比如,我们除了heade.js里管理的是一个组件的store对象,我们还有一个content.js来管理另外一个组件的store对象,那么我们在store文件夹下载新建一个content.js,和heade.js一样,只需要默认输出就可以了
javascript 代码

//content.js
export default {
    state: {
        cont: ‘这是content内容’
    }
}

然后我们在index.js中引入挂在modules下就可以啦
javascript 代码

import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);
import HeadeStore ‘./heade’; //引入刚才的heade.js
import ContentStore from ‘./content’ //引入content.js
export default new vuex.Store({
    modules: {
        Heade: HeadeStore,
        Content: ContentStore
    }
})

这样是不是方便多了,但是怎么用呢,很简单,现在需要通过modules去找他,之前的方法:$store.state.count改成$store.state.Heade.count就行了,很明显这是找到了heade.js下的count值,那么找content.js下cont的值呢?一样的,换一下modules的名就行$store.state.Content.cont
html 代码

//heade组件
<p>{{$store.state.Heade.count}}</p>

html 代码

//content组件
<p>{{$store.state.Content.cont}}</p>

输出结果分贝为:0,这是content内容

6、那么接下来你觉得问题解决了吗,难道你们的项目组件所有的状态都用这一个,那如果我需要动态的改变他的状态呢,怎么办?没事,这不mutations来了吗,问题就好多了,怎么用呢,这是干嘛的呢,说白了就是动态的改变state的值完成页面的同步渲染,看看用法吧,直接在state对象后面加就行了
javascript 代码

//heade.js
export default {
    state: {
        count: 0
    },
    mutations: {
        Count(state) {
            state.count = 1
        }
    }
}

解释一下,mutations对象是函数,默认传值是state,也就是上面的state,所以可以直接操作state.count
怎么用呢,很简单,比如页面有一个按钮,点击改变state的count
html 代码

<a href=”javascript:;” @click=”$store.commit(‘Count ‘)”>click</a>

此时页面渲染为1
commit(‘Count ‘)调用mutations的固定方法,参数为mutations的方法名,当然commit不止传一个参数,也可以传很多,比如:
html 代码

<a href=”javascript:;” @click=”$store.commit(‘Count’,10)”>click</a>

可以在heade.js的mutations下Count方法接受它
javascript 代码

//heade.js
export default {
    state: {
        count: 0
    },
    mutations: {
        Count(state, n) {
            state.count = state.count + n
        }
    }
}

此时输出结果为10

到这一步为止,我们已经可以正常的动态的修改state来渲染在页面了,你会发现,mutations是同步的,只要你在一个组件执行mutations的方法了,那所有的组件只要用到mutations的方法都会同步进行改变,这并不是我们想要的结果,所以,actions来解决问题了,写法一样,
javascript 代码

//heade.js
export default {
    state: {
        count: 0
    },
    mutations: {
        Count(state, n) {
            state.count = state.count + n
        }
    },
    actions: {
        Acount(context) {
            context.commit(‘Count ‘)
        }
    }
}

接着解释,actions和mutations的写法一样,都是函数,但是actions的默认参数是context,context.commit(‘Count ‘)的意思是触发mutations下的Count函数,那么怎么触发actions的函数呢,方法就是
html 代码

//heade组件
<a href=”javascript:;” @click=”$store.dispatch(‘Acount’)”>click</a>

dispatch方法是官方固定触发actions下函数的方法
官方推荐 , 将异步操作放在 action 中

还有一个属性我觉得也没有必要说了,getters,解释一下它的作用
getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。比如我们heade.js的state有一个值show:false getters就是计算与false相反的,但是它计算的值是不能直接修改的, 需要对应的 state 发生变化才能修改。
javascript 代码

//heade.js
export default {
    state: {
        count: 0,
        show: false
    },
    mutations: {
        Count(state, n) {
            state.count = state.count + n
        }
    },
    actions: {
        Acount(context) {
            context.commit(‘Count ‘)
        }
    },
    getters: {
        not_show(state) {
            return !state.show;
        }
    },
}

它也是默认接受state

最后一点就是为了方便操作开发,一般情况$store.state.Heade.show,$store.state.show写起来不是很方便,那么vuex的辅助函数mapState、mapGetters、mapActions、mapMutations就可以解决这个问题,目的就是方便操作,大家都知道vue的方法methods、computed、created下默认全局指向都是this,那我们之前的写法都是需要通过$store来获取其state值,那么现在用了mapState、mapGetters、mapActions、mapMutations就相当于我们随便起一个键值名(函数)(例如我们下文的count).把store对象的state之类的赋值给它,那么这时候我们获取store对象下state的值时就能直接可以用this.count去获调用就行了,相对于之前的写法和操作来说方便了很多!

javascript 代码

<template>
    <div class=”Heade”>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    import {
        mapState
    } from ‘vuex’;
    export default {
        name: ‘Heade’,
        data() {
            return {
                msg: ”
            }
        },
        computed: {
            //这里的三点叫做 : 扩展运算符
            …mapState([
                count: state => state.Heade.count
            ]),
        },
        created() {
            this.msg = this.count
        }
    }
</script>

还有这里的三点拓展运算符,其实写法跟这种是一样的:
javascript 代码

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

那么return的啥东西count函数就是个啥东西
现在我们就直接可以用this.count去找到state下count的值了,created方法是页面刚载入加载完事执行的方法,完后动态的赋值给msg,mapState一般放在computed计算属性中,mapActions、mapMutations一般放在methods下,

demo地址

vuex中文官网

前端开发工具排行榜|前端web开发工具排行|前端开发最新框架vue

» 本文来自:前端开发者 » 《Vue.js前端开发:Vuex使用心得》
» 本文链接地址:https://www.rokub.com/4073.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!