导航守卫/vuex

导航守卫
全局前置守卫
导航跳转就会触达前置守卫
fn回调接收三个参数，to将要访问的路由 from将要离开的地址 next()是放行的意思
router.beforeEach((to,from,next)=>{
to.path //将要访问的hash地址
from.path //将要离开的hash地址
 next()
})

vuex 项目数据共享的技术方案
数据存取一步到位，不需要层层传递
数据流动清晰
vuex数据都是响应式
安装
npm i vuex@3.6.2
初始化vuex
在src目录下创建store文件夹在创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vuex.store({
//开启严格模式
strict:true
//state就是全局的数据 
//想要访问就是this.$store.state.定义的名字
//computed：{...mapState（['定义的值','定义的值']）}
//computed：{...mapState（{计算属性的名字:'全局数据的名字'}）}
 state:{
   count:0
 }
})
export default store
在main.js中
import store from './store '
new Vue({
  render: h => h(App),
  //router:router
   store
}).$mount('#app')
=============================================
Mutation函数 专门修改store中的数据 只能同步修改state数据
在src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  //开启严格模式
  strict: true,
  // 全局共享数据
  state: {
    count: 0,
  },
  // 函数专门修改state中的数据
  mutations: {
    // 修改state值
    add(state, n) {
      state.count += n
    }
  },
})
export default store
使用Mutation函数
<template>
  <div class="left-container">
    <p>count 值：{{ count }}</p>
    <button class="btn btn-primary" @click="btnAddhandler">+1</button>
    <button class="btn btn-primary" @click="add(3)">+3</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
export default {
  name: 'Left',
  // 结合计算属性调用mapstate辅助函数拿到全局数据
  computed: {
    // ...展开运算符
    ...mapState(['count'])
    // ...mapState({ct:'count'})
  },
  methods: {
    btnAddhandler() {
      // 拿到全局数据mutations函数里面的方法
      // this.$store.commit('调用函数的名字', 参数)
      this.$store.commit('add', 1)
    },
    // mapMutations辅助函数结合methods来使用
    ...mapMutations(['add'])
  }
}
</script>
=============================================
actions 专门负责异步操作
在src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  strict: true,
  // 全局共享数据
  state: {
    count: 0,
  },
  // 函数专门修改state中的数据
  mutations: {
    // 修改state值
    add(state, n) {
      state.count += n
    }
  },
  actions: {
    // actions里面只有两个参数 ctx固定写法表示new Vuex.Store 
    // {n：自增数字，s：延时的秒数}
    addAsync(ctx, obj) {
      setTimeout(() => {
        ctx.commit('add', obj.n)
      }, obj.s);
    }
  },
})
export default store
使用actions 函
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />

    <p>count 值：{{ count }}</p>
    <button class="btn btn-primary" @click="btnAddhandler">+1</button>
    <button class="btn btn-primary" @click="add(3)">+3</button>
    <hr />
    <button class="btn btn-primary" @click="$store.dispatch('addAsync', { n: 1, s: 1000 })">一秒后自动+1</button>
    <button class="btn btn-primary" @click="addAsync({ n: 3, s: 3000 })">三秒后自动+3</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Left',
  // 结合计算属性调用mapstate辅助函数拿到全局数据
  computed: {
    // ...展开运算符
    ...mapState(['count'])
    // ...mapState({ct:'count'})
  },
  methods: {
    btnAddhandler() {
      // 拿到全局数据mutations函数里面的方法
      // this.$store.commit('调用函数的名字', 参数)
      this.$store.commit('add', 1)
    },
    // mapMutations辅助函数结合methods来使用
    ...mapMutations(['add']),
    ...mapActions(['addAsync'])
  }
}
</script>
=============================================
Getter 就是vuex里面的计算属性
在src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  strict: true,
  // 全局共享数据
  state: {
    count: 0,
    // 任务列表的数据，已完成的任务，state 为 true；false 表示任务尚未完成
    tasks: [
      { id: 1, name: 'xxxxxx', state: true },
      { id: 2, name: 'xxxxxx', state: false },
      { id: 3, name: 'xxxxxx', state: true }
    ]
  },
  // 函数专门修改state中的数据
  mutations: {
    // 修改state值
    add(state, n) {
      state.count += n
    }
  },
  actions: {
    // actions里面只有两个参数 ctx固定写法表示new Vuex.Store 
    // {n：自增数字，s：延时的秒数}
    addAsync(ctx, obj) {
      setTimeout(() => {
        ctx.commit('add', obj.n)
      }, obj.s);
    }
  },
  getters: {
    isAllDone(state) {
      //every表示每一项都满足条件返回true
      //some表示任何一项满足就返回true
      return state.tasks.every(item => item.state === true)
    }
  }
})
export default store
使用Getter 函数
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />

    <p>count 值：{{ count }}</p>
    <button class="btn btn-primary" @click="btnAddhandler">+1</button>
    <button class="btn btn-primary" @click="add(3)">+3</button>
    <hr />
    <button class="btn btn-primary" @click="$store.dispatch('addAsync', { n: 1, s: 1000 })">一秒后自动+1</button>
    <button class="btn btn-primary" @click="addAsync({ n: 3, s: 3000 })">一秒后自动+3</button>
    <hr />
    <p>所有任务的完成状态{{ $store.getters.isAllDone }}</p>
    <p>所有任务的完成状态{{ isAllDone }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Left',
  // 结合计算属性调用mapstate辅助函数拿到全局数据
  computed: {
    // ...展开运算符
    ...mapState(['count']),
    // ...mapState({ct:'count'})
    ...mapGetters(['isAllDone'])
  },
  methods: {
    btnAddhandler() {
      // 拿到全局数据mutations函数里面的方法
      // this.$store.commit('调用函数的名字', 参数)
      this.$store.commit('add', 1)
    },
    // mapMutations辅助函数结合methods来使用
    ...mapMutations(['add']),
    ...mapActions(['addAsync'])
  }
}
</script>
=============================================
Module模块 把不同的数据和方法按照彼此的关联进行封装
定义模块 在src/store/xxxx.js
export default {
 namespaced:true //开启命名空间
//拆了模块的state需要是函数
 state(){
   return{
  }
 } ,
 mutations:{}, //修改数据
 actions:{} //异步
 getters:{}//vuex里面的计算属性
}
组装模块
//导入
import xxxxx from './xxxxx.js'
在moudules下组装
new Vuex.Store({
 moudules:{
  //键：值
  模块注册名称：导入的模块对象
 }
})
在组件内访问模块成员
state：this.$store.state.注册名称.数据名称  ||  computed:{...mapState('注册名称',['数据名称'])}
mutations: this.$store.commit('注册名称/函数名称',传入的参数) || methods:{...mapMutations('注册名称',['函数名称'])}
actions: this.$store.dispatch('注册名称/函数名称',传入的参数) || methods:{...mapActions('注册名称',['函数名称'])}
getters:this.$store.getters('注册名称/getters的名称') || computed:{...mapGetters('注册名称',['getters的名称'])}