使用vuex之前,电脑要安装好node.js 以及vue-cli脚手架,最好是安装淘宝镜像cnpm
第一步:安装vuex包,cnpm install vuex
第二步:创建vuex实例,细节如下
1.打开main.js,引入vuex
import Vuex from 'vuex'
2.使用Vue.use注册一下
Vue.use(Vuex)
3.实例化一个vuex,并且添加一个初始化的state对象,假设登录状态默认为false
const store = new Vuex.Store({
state:{
sign:false
}
})
4.把vuex实例挂载到vue对象中去
第三步:视图层获取state中的状态,因为vuex被挂载到了vue对象中,也就是全局的this上,所以用this可以获取相对应的值
{{this.$store.state.sign}}
第四步:控制登录的状态,使用mutations。
mutations是vuex设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离。切记:Vuex中store数据改变的唯一方法就是mutation!
const store = new Vuex.Store({
state:{
sign:true
},
mutations:{
signin(state){
state.sign=true;
},
signout(state){
state.sign=false
}
}
})
视图层中根据vue的语法,使用commit方法调用signout
<template>
<button @click="signout">退出登录</button>
</template>
<script>
export default {
methods: {
signout(){
this.$store.commit("signout");
}
},
}
</script>