如何绘制current state map

发布网友发布时间：2022-04-22 21:26

共2个回答

懂视网时间：2022-04-23 01:47

这次给大家带来vuex state+mapState实战项目解析，vuex state+mapState的注意事项有哪些，下面就是实战案例，一起来看一下。

先使用vue cli构建一个自己的vue项目

1.npm i -g vue-cli
2.vue init webpack sell (sell是你的项目名)
3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N）
4.npm i (这个是安装项目的依赖包)
5.npm run dev（启动你的vue项目）这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件
6.webpack sell默认没有安装vuex, 所以要安装vuex; 在命令行中按两次ctrl+c 结束服务器，npm install vuex –save 安装vuex.
7.在你的src目录下新建一个vue的组件，我们姑且命名为helloVuex（这个命名你自己随意，开心就好）这个组件主要用来做主容器只展示内容
8.接着新建一个随便叫什么鬼的组件（这里我就叫display组件吧）用来接受state中的状态
9.下来我们在src目录下新建一个文件夹叫做store，在store下面新建一个js文件，叫做test.js(这里的store就是我们的前端数据仓库)用vuex 进行状态管理，store 是vuex的核心，所以命名为store 在src 目录下新建store 文件，在store 目录下新建test.js 文件（如下）。可以看到使用vuex 之前，要告诉 vue 使用它，Vue.use(Vuex); 我们这里只有一个变量count 需要管理，所以在创建 store 对象的时候，给构造函数传参，state 下面只有一个count, 且初始化为0。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store

现在所有的状态,也就是变量都放到了test.js中，那我们组件怎么才能获取到状态修值呢？这里有两个步骤需要操作

　　　　1， vue 提供了注入机制，就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue 构造函数，然后在所有的子组件中,this.$store 来指向store 对象。在test.js 中，我们export store, 把store已经暴露出去了，new Vue() 在main.js中，所以直接在main.js 中引入store 并注入即可。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

2，在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化，它就会自动变化。在display.vue 中作下面的更改，子组件中 this.$store 就是指向store 对象。我们把 test.js 里面的count 变为8, 页面中就变为了8。

<template>
 <p>
 <h3>Count is {{count}}</h3>
 </p>
</template>
<script>
 export default {
 computed: {
 count () {
 return this.$store.state.count 
 }
 }
 }
</script>

3，通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数,如果有10个，那么就要写10个函数，且重复写10遍return this.$store.state，不是很方便。vue 提供了 mapState 函数，它把state 直接映射到我们的组件中。

当然使用mapState 之前要先引入它。它两种用法，或接受一个对象，或接受一个数组。还是在display.vue 组件下。

　　对象用法如下：

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
　　　　　　// 下面这两种写法都可以
 computed: mapState({
 count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁 
 count: 'count'　　　　　　　　　// 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
 })
 }
</script>

数组的方法如下：

<script>
 import {mapState} from "vuex";
 export default {
 computed: mapState([ // 数组
 "count"
 ])
 }
</script>

4, 还有最后一个问题，如果我们组件内部也有computed 属性怎么办？它又不属于mapState 中。那就用到了对象分割，把mapState函数生成的对象再分割成一个个的，就像最开始的时候，我们一个一个罗列计算属性，有10个属性，我们就写10个函数。

es6中的... 就是分割用的，但是只能分割数组。在ECMAScript stage-3 阶段它可以分割对象，所以这时还要用到babel-stage-3; npm install babel-preset-stage-3 --save-dev, 安装完全后，一定不要忘记在babelrc 就是babel 的配置文件中，写入stage-3,

否则一直报错。在页面中添加个 p 标签，显示我们组件的计算熟悉

babelrc

{
 "presets": [
 ["env", {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
 "presets": ["env", "stage-3"],
 "plugins": ["istanbul"]
 }
 }
}

display.vue 组件更改后

<template>
 <p>
 <h3>Count is {{count}}</h3>
 <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </p>
</template>
<script>
 import {mapState} from "vuex";
 export default {
 computed: {
 localComputed () {
 return this.count + 10;
 },
 ...mapState({
 count: "count"
 })
 } 
 }
</script>

把test.js 中state.count 改为10, 查看一个效果

下面看下Vuex中mapState的用法

今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用户信息
 orderList: [{ orderno: '1111' }], //订单列表
 orderDetail: null, //订单产品详情
 login: false, //是否登录
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})
computed: {
 ...mapState([
 'orderList',
 'login'
 ]),
 }, 
 mounted(){ 
 console.log(typeof orderList); ==>undefind
 console.log(typeof this.orderList)==>object
 }

mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

如何操作Vue做出proxy代理

使用jquery获取上传文件具体内容

热心网友时间：2022-04-22 22:55

我们需要准备一张矢量地图，可以从网上找一张矢量地图，或者使用illustrator绘制一份矢量地图，然后导出为SVG格式的文件，这个文件可以在浏览器上打开，然后提取里面的path路径信息（M开头的坐标）。并将path路径信息，按照chinamapPath.js的格式准备好地图路径信息。

var china = [];

function paintMap(R) {
var attr = {
"fill": "#97d6f5",
"stroke": "#eee",
"stroke-width": 1,
"stroke-linejoin": "round"
};

china.aomen = {
name: "澳门",
path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr)
}
china.hk = {
//格式同上
};
}

以上是我们将准备好的地图路径信息封装到()函数中，并保存文件名为chinamapPath.js，供后面调用。
HTML
首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。

<div id="map"></div>

JAVASCRIPT
首先我们在页面中调用地图，方法如下：

window.onload = function () {
//绘制地图
var R = Raphael("map", 600, 500);//将地图载入到id为map的div中，并设置区域为600x500px大小。
paintMap(R);
}

这个时候我们用浏览器打开会显示载入后的地图。接下来我们要给地图中的对应的省份区域加上省份名称，以及鼠标滑向每个省份区块时的变色动画效果。

window.onload = function () {
var R = Raphael("map", 600, 500);
//调用绘制地图方法
paintMap(R);

var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
};

for (var state in china) {
china[state]['path'].color = Raphael.getColor(0.9);

(function (st, state) {

//获取当前图形的中心坐标
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);

//写入文字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

st[0].onmouseover = function () {//鼠标滑向
st.animate({fill: st.color, stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {//鼠标离开
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};

})(china[state]['path'], state);
}
}

以上代码中运用了raphael提供的方法有：getColor，getBBox，animate，toFront等等，这些可以在raphael文档中找到使用说明，本文不在讲述。
此外由于地图尺寸原因，有些省份名称在地图中的显示位置不恰当，需要修正偏移量，这样看起来舒服点。