vue项目处理跨域、模拟后台发数据、vuex用法

我会带着你远行 2022-03-25 10:14 238阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

使用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

二、模拟后台，传数据

1、static文件夹下创建mock文件夹，在mock下创建index.json文件

![20190226103113355.png][]

index.json文件模版

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2][]

2、修改index.js配置文件

proxyTable: {
          '/api':{
            target:'http://localhost:8484',
            pathRewrite:{
              '^/api':'/static/mock'
            }
          }
        },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 3][] 4、请求并打印

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 4][]

三、vuex

1、命令行cnpm install vuex --save安装vuex，并新建vuex文件index.js,内容以下

2、在state下定义需要的变量，在mutations下修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 5][]

3、在main.js中引用、和new Vue中定义

![20190228101018412.png][]

![20190228101105921.png][]

4、在任何组件中都可这样使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 6][]

5、在组件中通过commit提交数据给store中的conmutation修改，changeCity名称和store中定义的名称要相同

![20190228101449343.png][]

![20190228101239474.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20220325/9c89c81d52f3422e8451206689a4e596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20220325/885d1118898947ae8db022eacae0958c.png
[20190226103113355.png]: /images/20220325/7f3be734ffbf4fbfb9d32d4f2899f8d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 2]: /images/20220325/7e48bb5103d047cf92c64d32ed871ec9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 3]: /images/20220325/e3d22e22e2fe402496bfcf13c80e21b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 4]: /images/20220325/a3affc7d2778405f8e2bb8b002c9c43b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 5]: /images/20220325/67c2e5c46d8741b1a658df7f6ff82e65.png
[20190228101018412.png]: /images/20220325/71cc35117cf4496fb9b11c2b2a87faef.png
[20190228101105921.png]: /images/20220325/094e00df52dc4380bbbb2b183396284f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 6]: /images/20220325/a7c41845e4f44aa19304cf2bc77b8e14.png
[20190228101449343.png]: /images/20220325/4a5c2401a82b47daa6ac2f93e57d5875.png
[20190228101239474.png]: /images/20220325/0e665dad06a446a0887184fcd0b74819.png