VueX & Cookie

Vuex解决了Vue各组件资源不共享的问题,通过VueX可以灵活的在各个组件之间传递数据

安装:

--save-dev 是把包安装到开发组件中, 生产环境使用 --save

npm install vuex --save-dev

npm install vuex-cookies --save-dev

引入:

// main.js 文件中,首先需要在src目录下新建一个store目录,然后新建store.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'   // 这里是导入 axios
import store from './store/store'   // 这里引入store, 路径为相对于main.js 的路径

Vue.config.productionTip = false
Vue.prototype.$axios = axios   // 这里是给Vue设置一个扩展原型, 使用时直接 this.$axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,   // 加载 store
  template: '<App/>',
  components: { App }
})

配置store.js

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: Cookie.get('user'),
    token: Cookie.get('token')
  },
  mutations: {
    // 这里接收的一个返回值,后端传过来的字典数据,根据字典数据取值
    setToken: function (state, response) {
      console.log(response)
      state.username = response.user
      state.token = response.token
      Cookie.set('user', response.user, '20min')
      Cookie.set('token', response.token, '20min')
    },
    clearToken: function (state) {
      state.username = null
      state.token = null
      Cookie.remove('user')
      Cookie.remove('token')
    }
  }
}
)
// state 相当于全局变量,在任何组件都可以通过 this.$store.state.<val> 来获取值
// mutations 相当于全局生效的方法(函数),在任何组件都可以通过 this.$store.commit("<方法名>", <参数>) 来调用方法
// commit调用方法的时候只能接受一个参数,就是说如果同时接收多个参数必须传字典

组件中调用 store.js 中的方法变量

    methods: {
      login: function () {
        let url = 'http://127.0.0.1:8000/auth/'
        let that = this
        this.$axios.post(url, {
          username: this.username,
          password: this.pwd,
          option: this.sel
        }).then(function (response) {
          // 调用时传入后端返回的字典数据
          that.$store.commit('setToken', response.data)
          that.$router.push('/')
        })
      }
    }

    <div v-text="this.$store.state.username"></div>
    <div v-text="this.$store.state.token"></div>

---

直接在APP.vue中引入组件内容(相当于Django的include)

<template>
  <div id="app">
    <login></login>   // 下面 components 中写的组件名,写成这种标签形式
    <router-view/>
  </div>
</template>

<script>
  import login from './components/Login.vue'  // 导入组件
export default {
    components: {   // components 中写引入的组件
      login
    },
    name: 'app'
}
</script>

---

引入JQuery & BootStrap

// 修改 webpack.base.conf.js
// 在文件上面加入变量
const webpack = require("webpack")
// 在 module.exports 中加入下面的代码
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]
// main.js 中引用
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
// 如果一直报 $ never use 提示就写个这个
Vue.prototype.$ = $

---

.$router 跳转组件页面使用方式

// 无参方式
that.$router.push('/')
// 传参方式
this.$router.push({'path': '/course/detail/', query: {'id': id}})
// 传参方式起,取值(在跳转后的组件)
let courseID = this.$route.query.id
// query 指的是传参的时候的query字段代表的字典, 可以通过query.<key>来获取query中的value

如果通过 $router 加上 query 来跳转组件页面,还需要在路由中指定跳转后的组件页面

    {
      path: '/course/detail/',   // 跳转时写的路径,不需要写在后面加 /:id 来匹配
      name: 'Detail',
      component: Detail
    }

如果通过 $router直接跳转对应id的页面,类似下面这种

this.$router.push({'path': '/course/detail/' + id)

则需要在路由中加入:id

    {
      path: '/course/detail/:id',   // id为key,如果同时传多个参数可以/:name,那么取值的时候
        						  // name就是key
      name: 'Detail',
      component: Detail
    }
// 这种方式可以在跳转的组件中,通过 let courseID = this.$route.params.<key> 来获取URL中的参数, key

// 路由跳转方式汇总
<router-link to="/index">首页</router-link>
<router-link :to="{path:'/index'}">首页</router-link>
<router-link :to="{name:'login',query:{v:123}}">首页</router-link>  /index?v=123
<router-link :to="{name:'login',params:{v:123}}">首页</router-link>  /index/123/

this.$router.push({path: '/index'})
this.$router.push({name: 'index'})

// 当前请求url相关
this.$route.path

---