一、vuex定义
- Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，使用插件的形式引进项目中
- 集中存储和管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
- 每一个 Vuex 应用的核心就是 store（仓库），new Vue.store({...})，“store”基本上就是一个容器，它包含应用中大部分的状态 (state)
二、vuex有什么用
- 解决了多个视图依赖于同一状态
- 解决了来自不同视图的行为需要变更同一状态
- Vuex则是把组件的共享状态抽取出来，以一个全局单例模式管理
同时，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码变得更结构化、易维护
以上就是vuex的思想
三、什么时候用
- SPA 开发大型单页应用 时使用
四、vuex和全局对象的区别
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用
五、安装和配置
vuex
1.安装
npm i vuex --save-dev
2.配置
导入vue 和 vuex
Vue.ues(Vuex)
定义一个对象存下面的：
state 数据
mutations 对应修改数据的方法
方法的参数里有(state,payload)
参数里 默认会有一个state，vue自带的
payload 调用者传的参数
export default 导出
导出一个 new Vuex.Store(对象名) 注意这里的严格区分大小写
3.挂载到实例上 main.js
导入
放到vue对象里面
4.使用、取值
取值 this.$store.state.数据名
用(改) this.$store.commit('函数名',参数)
- 配置如下
src文件夹里面新建store文件夹index.js文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// vuex的配置项
const options = {
// state(固定) 是用来存放数据的
state:{
// 底部组件 显示或不显示
showFooter:false,
isLogin:false
},
// mutation 用来修改state里的属性值
mutations:{
// 放函数方法 函数名对应都是用来更改数据里变量的 参数里 默认会有一个state，vue自带的
// 改变showFooter的值 payload代表传的参数->调用者传的参数
SHOWFOOTER(state,payload){
state.showFooter=payload;
},
// 改变登入状态
ISLOGIN(state,payload){
state.isLogin = payload;
}
}
}
const store = new Vuex.Store(options);
export default store;
// export default new Vuex.store(options);
main.js 里配置
import Vue from "vue";
import router from "./router/index";
import store from './store/index'
new Vue({
// 引入store
store,
router,
el: "#app",
render: h => h(App)
}).$mount("#app");
六、小demo应用
- 显示隐藏
<template>
<div>
<h3>个人中心</h3>
<div v-if="$store.state.isLogin">
<p>手机尾号5539</p>
<button @click="logout">退出登陆</button>
</div>
<button v-else @click="login">立即登陆</button>
</div>
</template>
<script>
export default {
methods: {
login(){
this.$store.commit('ISLOGIN',true);
// 调用store文件下的index.js仓库里的函数并带参数
},
logout(){
this.$store.commit('ISLOGIN',false);
}
},
}
// 通过vuex的 $store.commot 方法使用store创库里的方法并传参数过去
</script>
<style>
</style>
- 父子通信
子组件
<template>
<div v-show="show">
<!-- 蒙层 -->
<div class="pop"></div>
<div class="box">
<h3>温馨提示</h3>
<div class="content">{{msg}}</div>
<p>
<button @click="ok">确认</button>
<button @click="cancel">取消</button>
</p>
</div>
</div>
</template>
<script>
export default {
props:["msg","show"],
methods: {
ok(){
this.$emit("yes","ok");
},
cancel(){
this.$emit("no","cancel");
}
},
}
</script>
<style scoped>
.pop{
position: fixed;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.5;
}
.box{
display: inline-block;
position: fixed;
top: 50%;
margin-left: -150px;
margin-top: -100px;
left: 50%;
z-index: 2;
background: #fff;
padding: 50px 100px;
}
</style>
父组件
<template>
<div>
<Dialog :msg="msg" :show="show" @yes="yes" @no="no"/>
<p>
<button @click="showDialog">显示弹框</button>
</p>
</div>
</template>
<script>
import Dialog from '@/components/Dialog'
export default {
data() {
return {
msg:"你好吗",
show:false
}
},
components:{
Dialog
},
methods: {
showDialog(){
this.show=true;
},
yes(data){
// 关闭弹窗
this.show = false;
alert("你点了确定");
},
no(data){
// 关闭窗口
this.show = false;
// todo
alert("你点击了取消");
}
},
}
</script>
<style>
</style>
// 父子通信 子传父 子使用$emit带参调用父的自定义事件
// 父传子 父通过子的props属性传参数
七、项目应用
- 需求：底部导航栏里有一个是点击之后隐藏底部的
- 思路-分析 ：
1.在vuex的store仓库(index.js)里，定义一个showFooter变量储存数据false
然后在index.js下的mutations，这个里面是处理数据对应的方法SHOWFOOTER，
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// vuex的配置项
const options = {
// state(固定) 是用来存放数据的
state:{
// 底部组件 显示或不显示
showFooter:false
},
// mutation 用来修改state里的属性值
mutations:{
// 放函数方法 函数名对应都是用来更改数据里变量的 参数里 默认会有一个state，vue自带的
// 改变showFooter的值 payload代表传的参数->调用者传的参数
SHOWFOOTER(state,payload){
state.showFooter=payload;
}
}
}
const store = new Vuex.Store(options);
export default store;
// export default new Vuex.store(options);
2.然后通过router下的index.js来导入store
3.然后用到路由守卫，beforeEach((to,from,next)=>{next();}) to记录点击后去的路由地址以及信息from记录上一个路由地址及信息 next(); 下一个，执行的意思。
4.通过给路由添加对应的meta然后在meta下添加标题和showFooter，当然在需要隐藏的下面添加就行，当然值得是true。
5.然后if判断to.meta.showFooter判断是否有showFooter以及值是否为true然后通过调用vuex仓库的方法改变 store.commit('SHOWFOOTER'，true)传入true参数改变。
6.最后在底部组件里加上v-if="$store.state.showFooter"，注意我们上面的所有操作无非只是改变一个数，然后通过数判断true和false最后应用到底部组件上
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store/index';
// 使用Router
Vue.use(Router);
// 快熟下复制一行ctri+shift+下
// 配置路由
const routerList =[
{
path:'/film',
meta:{
title:'电影',
showFooter:true
},
component: () => import('@/views/film/index')
},
{
path: '/demo',
meta: {
title: 'demo',
},
component: () => import('@/views/demo/index')
},
{
path:'/movie',
component:() =>import('@/views/movie'),
// redirect 重定向 默认显示的组件,
redirect:'/movie/list',
children:[
{
path: 'list',
meta:{
title:'电影列表',
showFooter:true
},
component: () => import('@/views/movie/children/list'),
},
{
path: 'xiangqing',
meta:{
title:'电影详情',
showFooter:true
},
component: () => import('@/views/movie/children/xiangqing'),
},
]
},
{
path: '/comner',
meta:{
title:'影院',
showFooter:true
},
component: () => import('@/views/comner/index'),
redirect: '/comner/list',
children:[
{
path:'list',
meta:{
title:"影院列表",
showFooter:true
},
component: () => import('@/views/comner/children/list'),
}
]
},
{
path: '/pintuan',
meta:{
title:'拼团'
},
component: () => import('@/views/pintuan/index')
},
{
path: '/my',
redirect: '/my/center',
component: () => import('@/views/my/index'),
children: [
{
path: 'center',
meta: {
title: '个人中心',
showFooter: true
},
component: () => import('@/views/my/children/center')
},
]
},
]
const router = new Router({
routes:routerList
})
// 路由守卫
router.beforeEach((to,from,next)=>{
document.title=to.meta.title;
// showFooter的值为true的时候显示底部
if(to.meta.showFooter){
store.commit('SHOWFOOTER',true);
}else{
store.commit('SHOWFOOTER', false);
}
next();
})
export default router;
八、小总结
1.vuex是一对多的关系，一个数据多个人使用，因此达到了跨组件通讯。但一个改了里面的数据其他访问的数据也会发生变化。
2.router.beforeEach方法，路由守卫。里面的属性能更直观的给我们展示当前路由的信息，我们可以根据这个进行判断达到自己想要的效果。
