vuex使用

使用的流程

文件中的代码

前端页面
<template>
  <div>
    <h1>使用vuex</h1>
    购物车商品数量:{{num}}
    购物车的数量：{{$store.state.num}}
    <br>
    <button @click="yjx">加数量</button>
  </div>
</template>
<script>
export default {
name: 'HomeView',
  data(){
    return{}
  },
methods:{
    yjx(){
      1.直接在这个页面完成加减
     this.$store.state.num += 1
      2.通过dispatch触发actions这个就是一个完整的流程方法
this.$store.dispatch('add',2)  //add必须是action中的函数
3.跳过Actions调用Mutations函数
      this.$store.commit('yzx',3)
    }
  }
}
</script>
src下的store文件的index文件
import Vue from 'vue'   导入main文件在那边也导入了
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    num:10    默认的数量
  },
  mutations: {
    yzx(state, count){
      // console.log(state)
      // console.log(count)
      state.num=state.num+count   添加数量
    }
  },
  actions: {
    // 需要一个参数和一个调用函数的数据,context上下文对象，可以触发mutations中的函数，也可以更改state中的数据都可以
    add(context, count){
        // 使用count来触发mutations的函数
      // console.log(context)
      // console.log(count)
      context.commit('yzx', count)  // 触发mutations函数yzx执行
    }
  },
})

组件之间的交互

html文件编写

父件
<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
  name: 'HomeView',
  data(){
    return{}
  },
  methods:{
    app(name){
      // 直接操作
      // this.$store.state.goods.push(name)
      // 流程
      // 这里可以发送Ajax请求库存够不够
      this.$store.dispatch('yy',name)
    }
  },
  components:{
    HelloWorld
  }
}
</script>
子件
<template>
  <div>
      购物车商品:{{$store.state.goods}}
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
index文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    goods:[]
  },
  mutations: {
    yyjj(state, name){
      state.goods.push(name)
    }
  },
  actions: {
    yy(context, name){
      context.commit('yyjj', name)
    }
  },
})

Router使用(做两个页面的跳转)

简单使用

<template>
  <div>
    <h1>久保</h1>
    <router-link to="/elmw">   路由配置
      <button>跳转到式守</button>  这里包什么都会跳转
    </router-link>
  </div>
</template>

js跳转html文件

<button @click="yy">跳就对了</button>
methods:{
    yy(){
      this.$router.push('/elmw')
    }
  },

路由跳转时，可以使用对象

通过对象跳转路由name形式： <router-link :to="{name:'about'}">
通过对象跳转路由path形式： <router-link :to="{path:'/about'}">
对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
<router-link :to="usr">
      <button>跳转到式守</button>
</router-link>
  data(){
    return{
      usr:{
        path:'/emlw',
        query:{
          id:1,
          age:18
        }
      }
    }
  }

获取网址？后带的数据

this.$route：当前路由对象，当前路径，取传递数据。。。

this.$router：整个路由对象，主要做跳转用

这样就是获取？后面的数据this.$route.query注意那个页面的哦

export default {
  name: "elmw",
created() {
  console.log(this.$route.query)
}}

注册的时候加个：pk就是后面匹配数字多少都可以3

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
    {
    path: '/yzx/:pk',
    name: 'yzx',
    component: yzx
  },
]
获取pk的数据
export default {
  name: "yzx",
  created() {
    console.log(this.$route.params)
  }
}

this.router 的一些方法

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

多级路由（就是为了实现在一个页面上几个子页面跳转）

主文件编辑，创建一个文件存放在views下面

<template>
<div>
  <h1>应锦曦主页面</h1>
  <router-link to="yjx01"><button>yjx--01</button></router-link>   点击展示子页面
  <router-link to="yjx02"><button>yjx--02</button></router-link>  点击展示子页面
  <router-view>   写着吧不知道干嘛
  </router-view>
</div>
</template>

注册方法

import yjx02 from "@/views/yyjj/yjx02";    文件导入
import yjx01 from "@/views/yyjj/yjx01";     文件导入
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
    {
    path: '/yzx/:pk',
    name: 'yzx',
    component: yzx
  },  {
    path: '/yjx',
    name: 'yjx',
    component: yjx,
    children:[   放在主页面的下面 然后就可以使用子页面了
      {
        path: 'yjx01',
        component: yjx01
      },
      {
        path: 'yjx02',
        component: yjx02
      }
    ]
  },
]

路由守卫（对路由进行权限控制）

使用的范围（全局守卫，独享守卫，组件守卫）

前置路由守卫和后置路由守卫

在router-index.js中添加以下代码

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 要是访问yjx，都不能跳转'
    // 如果没有登录，不能访问
    if (to.path == '/yjx/yjx01') {
        alert('你没有有权限')
    } else {
        next() # 继续访问
    }

路由的工作模式（切换HTTP请求）

路由器的两种工作模式
1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
    地址中永远带着#号，不美观 。
    若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    兼容性较好。
4 history模式：
    地址干净，美观 。
    兼容性和hash模式相比略差。
    应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

localstorage和sessionstorage,和cookie（前端存储数据的地方）

localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在

sessionstorage：只在当前会话生效，关闭浏览器，就没了

cookie：有过期时间，到了过期时间，自动删除

代码编写

<template>
<div>
    <h1>操作localstorage,永久存储</h1>
    <button @click="addLocalstorage">增加</button>
    <button @click="getLocalstorage">查</button>
    <button @click="deleteLocalstorage">删除</button>
    <h1>操作sessiostorage,当前会话，关闭浏览器</h1>
    <button @click="addSessiostorage">增加</button>
    <button @click="getSessiostorage">查</button>
    <button @click="deleteSessiostorage">删除</button>
    <h1>操作cookie,有过期时间</h1>
    <button @click="addCookie">增加</button>
    <button @click="getCookie">查</button>
    <button @click="deleteCookie">删除</button>
</div>
</template>
<script>
export default {
  name: 'HomeView',
  data(){
    return{
    }
  },
  methods:{
    addLocalstorage() {
      var userinfo = {name: 'lqz', age: 19}
      localStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getLocalstorage() {
      var userinfo = localStorage.getItem('userinfo')
      console.log(JSON.parse(userinfo).name)
    },
    deleteLocalstorage() {
      localStorage.clear()
      localStorage.removeItem('userinfo')
    },
    addSessiostorage() {
      var userinfo = {name: '彭于晏', age: 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getSessiostorage() {
      var userinfo = sessionStorage.getItem('userinfo')
      console.log(JSON.parse(userinfo).name)
    },
    deleteSessiostorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('userinfo')
    },
    addCookie() {
      // 需要借助于第三方  vue-cookies
      // cnpm install -S vue-cookies
      this.$cookies.set('name', '刘亦菲', '300s')
    },
    getCookie() {
      console.log(this.$cookies.get('name'))
    },
    deleteCookie() {
      this.$cookies.remove('name')
    },
  },
  components:{
  }
}
</script>