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

下面表达式是：2018年6月1日
new Date(2018, 5, 1);

下面表达式是：2018年5月1日
new Date(2018, 4, 1);
或
new Date(2018, 5-1, 1);

下面表达式是：2018年5月31日（得到上个月的最后一天）
new Date(2018, 5 , 0);
日的参数可以是0，也可以是负数，表示上个月底的那一天。

下面表达式是：2018年7月01日
new Date(2018, 5, 31);

import Vue from "vue";
import App from "./App.vue";
import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css'; //样式在index.html页面引入
// Vue.use(ElementUI);
Vue.use(ElementUI, { size: 'small' });

new Vue({
 el : "#app" ,
 render: (h) => h(App)
});

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
Vue.use(Vuex); //将vuex安装到vue中

//创建一个仓库，并且存放一些全局数据（存放四大天王选项）
const store = new Vuex.Store({
 state : {
 a : 100
 }
})

new Vue({
 el : "#app",
 store, //将store注入到全局中
 render : (h)=> h(App)
})

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
Vue.use(Vuex); //将vuex安装到vue中

//创建一个仓库，并且存放一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 // 这里的函数只能通过commit()触发，其他操作是无法影响的
 JIA(state){
  state.a++
 },
 MINUS(state){
  state.a--
 }
 }
})

import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
 plugins: [createLogger()]
})

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
import createLogger from 'vuex/dist/logger';

Vue.use(Vuex); //将vuex安装到vue中

//创建一个仓库，并且存放一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 // 这里的函数只能通过commit()触发，其他操作是无法影响的
 JIA(state,payload){
  state.a += payload.n
 },
 MINUS(state, payload){
  state.a -= payload.n
 }
 },
 plugins: [createLogger()]
})

const store = new Vuex.Store({
 state : {
 a : 100
 },
 mutations : {
 JIA(state,payload){
  console.log("只有commit命令能触发我")
  state.a += payload.n
 }
 },
 actions : {
 async JIA({commit}){
  // console.log("只有dispatch命令能触发我，这里可以写异步语句")
  var data = await fetch('../data/1.txt').then(data=>data.json())
  //action提交的是mutation，而不是直接更改状态，
  //请求成功返回的数据需要通过commit命令mutations去修改state中的数据
　　　　　　　// context.commit("JIA", {n: data})
  // this.commit("JIA", {n: data})
  commit("JIA", {n:data})
 }
 },
 plugins: [createLogger()]
})

actions:{
 async JIA({commit}){
 var data = await fetch("../data/1.txt").then(data=>data.json());
 commit("JIA",data)
 }
},

methods:{
 add(){
 this.$store.dispatch("JIA")
 }
}

computed: {
 arr() {
 return this.$store.state.todos.filter(todo => todo.done).length
 }
}

import Vue from 'vue';
import Vuex from 'vuex'; //引入Vuex包
import App from './App.vue';
import createLogger from 'vuex/dist/logger'; //调试工具

Vue.use(Vuex); //将Vuex安装到全局

//创建一个仓库，并且存放以一些全局数据（存放四大选项）
const store = new Vuex.Store({
 state:{
 a:100,
 students:[
  {name:"小明",sex:"男"},
  {name:"小红",sex:"女"},
  {name:"小刚",sex:"男"},
  {name:"小花",sex:"女"},
  {name:"小黑",sex:"男"}
 ]
 },
 getters:{
 //得到所有男生
 nan(state){
  return state.students.filter((item)=>{
  return item.sex == '男';
  })
 },
 //得到所有女生
 nv(state){
  return state.students.filter((item)=>{
  return item.sex == '女';
  })
 },
 //得到男生和女生的个数，getter也可以接受getter作为第二个参数
 nanCount(state,getters){
  return getters.nan.length;
 },
 nvCount(state,getters){
  return getters.nv.length;
 }
 },
 plugins: [createLogger()]
})

new Vue({
 el:"#app",
 store, //将store注入到全局
 render:(h)=> h(App)
})

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

{
 "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"
 }
}

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': '' }
   }
  }
 }
}

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

new Vue({
 el: "#app",
 store,//引入store文件夹中的index.js
 render: (h) => h(App)
})

import Vue from "vue";
import Vuex from "vuex";
import counterStore from "./counter/store.js";//引入counter的store
import taobaoStore from "./taobao/store.js";//引入taobao的store
import createLogger from 'vuex/dist/logger';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {//放入modules
  counterStore,
  taobaoStore
 },
 plugins : [createLogger()]
})

export default {
 namespaced: true, //命名空间
 state : {
  a:100
 },
 mutations : {
  ADD(state,payload){
   state.a++//上面的state
  }
 },
 actions : {
  ADD({commit}){
   commit("ADD")//调用上面mutations的ADD
  }
 }
}

export default {
 namespaced: true,//开启命名空间跟上面一样的用法
 state : {
  a:200
 },
 mutations : {},
 actions : {}
}