vue渐进式框架-vuex的写法及跨域处理方法

文章目录

• 一、在组件中使用Vuex的终极写法
• 二、modules
• 三、vue环境下的跨域处理方法
• 四、Sass使用

一、在组件中使用Vuex的终极写法

被map*系列方法映射进来的，都可以使用this直接访问，使用起来更方便。

import { mapState,mapGetters,mapMutations,mapActions } from "vuex"

export default{
	computed:{
		...mapState("namespaced",["state中的变量"]),
		...mapGetters("namespaced",["getters中的变量"])
	},
	methods:{
		...mapMutations("namespaced",["mutations中的方法"]),
		...mapActions("namespaced",["actions中的方法"])
	}
	


           

特别注意：在分modules时，一定要给每一个子store开启命名空间——

namespaced:true

；在actions中也可以直接修改state，但不建议这么做，因为这么做devTools就失效了。

二、modules

作用是把一个大的Store拆分成多个子store。好处：单一模块便于维护，多人协同开发减少代码耦合与冲突。

子store中的写法

const goodModule = {
  // 每一个子store都手动地开启命名空间
  namespaced: true,

  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

export default goodModule

           

根store中的写法，写在modules中

const store = new Vuex.Store({
  // state
  // 凡是在放在state中的数据，可以被当前程序中任何组件进行访问
  // state中的数据，是可以被共享的
  state: {
    msg: 'xxx',
  },
  // getters
  // 它相当于是计算属性
  // 当它所关联的state变量发生变化时，getters变量自动更新
  getters: {},
  // mutations
  // 它的作用只有一个，就是用于修改state中的数据
  // 当state中的数据发生变化时，页面视图自动更新
  mutations: {
    // payload 负荷负载，表示从视图中传递过来的业务数据
    // 当需要传递多个数据时，建议使用 json对象格式来包装数据
    updateMsg(state, payload) {
    },
    updateCnodeList(state, payload) {
      // 把后端数据更新到state中
      // state发生变化，组件自动更新
      // 组件中，使用 this.$store.state.cnodeList 的方式来使用数据
     }
  },
  // actions
  // 它的作用是专门用于和后端api交互的
  // 在组件中，使用this.$store.dispatch('actions方法名', '接口入参')触发
  actions: {},
 
  modules: {
    // key，就是子store的名字、命名空间
    good
  }
})

export default store

           

三、vue环境下的跨域处理方法

什么是跨域？

协议、IP地址和端口号，三者有任意一个不相同就是跨域。

怎么理解CORS同源策略？

只有浏览器环境下才有同源策略，是浏览器内置一种安全机制。 它不阻塞img、js、css等静态资源的请求 它只针对XHR通信，针对的结果是ajax请求根本发不出去

怎么解决浏览器环境下跨域问题呢？

让浏览器客户端向本地同源服务发起api请求，本地服务收到请求时将其代理转发至远程目标服务器。

在Vue环境下具体做法：

在项目根目录新建一个vue.config.js的文件，代码如下：

module.exports = {
    // 本地服务器
    devServer: {
      proxy: {
        '/soso': {  //标识字段
          target: 'https://c.y.qq.com',  // 远程目标服务器
          ws: true,
          changeOrigin: true
        }
      }
    }
  }
  //重启项目，然后把axios封装里的baseUrl改变本地服务器地址。
           

四、Sass使用

在vue脚手架环境默认不能使用sass，要使用sass安装下面两个插件即可：

cnpm install sass-loader -D
cnpm install node-sass -D
           

在组件如何使用sass？

常用语法有：变量定义，作用域嵌套，&代表是父元素。

<style  scoped>
$size: 20px;
$red: rgba(ff,00,22,1);

.box {
  font-size: $size;
  &>span {
    color: $red;
  }
}
</style>
           

注意：工作中，不是所有vue项目都使用sass，也可能会使用到less、postCSS、stylus这些CSS技术

如果使用其它的，自己翻Vue CLI 指南文档（'CSS相关’这篇文章中去找）