Vue中UI组件库之Vuex与虚拟服务器初识(9)

日期：2020-05-11 栏目：程序人生浏览：次

<template>
 <div>
 <h1>{{students}}</h1>
 <h2>男生：{{$store.getters.nanCount}}个</h2>
 <h2>女生：{{$store.getters.nvCount}}个</h2>
 <button @click="nan">查看男生</button>
 <button @click="nv">查看女生</button>
 <button @click="all">查看全部</button>
 </div>
</template>
<script>
export default {
 data(){
 return {
  isState:'all'
 }
 },
 computed:{
 students(){
  if(this.isState == 'all'){
  return this.$store.state.students;
  }else if(this.isState == 'nan'){
  return this.$store.getters.nan;
  }else if(this.isState == 'nv'){
  return this.$store.getters.nv
  }
 }
 },
 methods:{
 nan(){
  this.isState = 'nan'
 },
 nv(){
  this.isState = 'nv'
 },
 all(){
  this.isState = 'all'
 }
 }

}
</script>

在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。官网说的很清楚，getters是store的计算属性。

getters 可以对State进行计算操作。虽然在组件内也可以做，但是getters可以在多组件之间复用如果一个状态只在一个组件内使用，是可以不用getters

getters上简单来说就是存放一些公共函数供组件调用。getters 会暴露为 $store.getters 对象，也就是说可以通过 $store.getters[属性]来进行相应的调用。

4.6vuex的命名空间

目录结构：

│ package.json
│ webpack.config.js
│
└─www
 │ index.html
 │
 └─app
 │ App.vue
 │ main.js
 │
 ├─components
 └─store
  │ index.js
  │
  ├─counter
  │ store.js
  │
  └─taobao
   store.js

./package.json:

{
 "name": "vue_study",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev": "webpack-dev-server --content-base ./www --port 8080"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "vue": "^2.5.17",
 "vuex": "^3.0.1"
 },
 "devDependencies": {
 "css-loader": "^1.0.1",
 "style-loader": "^0.23.1",
 "vue-loader": "^15.4.2",
 "vue-style-loader": "^4.1.2",
 "vue-template-compiler": "^2.5.17",
 "webpack": "^4.9.1",
 "webpack-cli": "^3.1.2"
 }
}

./webpack.config.js:

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
 //程序的入口文件
 entry: "./www/app/main.js",

 //程序的出口（打包的文件）
 output: {
  //打包文件输出的路径
  path: path.resolve(__dirname, "./www/dist"),
  //打包文件的名称
  filename: 'all.js',
  publicPath: "/public" //这是对webpack-dev-server的配置，配置虚拟路径
 },
 //监听文件的变化（自动打包）
 watch: true,
 mode: "development",
 //配置webpack模块插件
 module: {
  //关于模块的配置规则
  rules: [{
    // 模块规则（配置 loader、解析器等选项）
    test: /\.js?$/, //解析的时候匹配js文件
    //翻译什么文件夹中的文件
    include: [path.resolve(__dirname, "www/app")],
    //不翻译什么文件夹中的文件
    exclude: [path.resolve(__dirname, "node_modules")],
    // loader:"babel-loader",
    //配置翻译语法
    // options:{
    //  presets:["es2015","es2016"]
    // }
   },
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    include: [path.resolve(__dirname, "www/app")],
    exclude: [path.resolve(__dirname, "node_modules")],
    options: {
     loaders: {
      js: 'babel-loader!eslint-loader'
     }
    }
   },
   {
    test: /\.css$/,
    include: [path.resolve(__dirname, "www/app")],
    exclude: [path.resolve(__dirname, "node_modules")],
    use: ['vue-style-loader', 'css-loader'],
   },
   {
    test: /\.styl(us)?$/,
    use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
    ]
   }
  ]
 },
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 },
 //最新版webpack需要引入此插件
 plugins: [
  new VueLoaderPlugin()
 ],
 //webpack设置代理跨越
 devServer: {
  proxy: {
   '/api': {
    target: 'http://127.0.0.1:3000', //设置你调用的接口域名和端口
    //这里理解成/api代理target中的地址，后面组件中调用接口要使用/api代替
    pathRewrite: { '^/api': '' }
   }
  }
 }
}

转载注明出处：http://www.heiqu.com/384.html

Vue中UI组件库之Vuex与虚拟服务器初识(9)

相关推荐