使用vuex做增删改查

目录结构webpack.config.jsconst path = require('path');const htmlplugin = require('html-webpack-plugin');const cleanplugin = require('clean-webpack-plugin');module.exports = {entry:{main:'./

kingov

8809人浏览 · 2017-07-24 13:17:43

kingov · 2017-07-24 13:17:43 发布

源码：https://github.com/kingov/vuex-demo1

目录结构

这里写图片描述

webpack.config.js

const path = require('path');
const htmlplugin = require('html-webpack-plugin');
const cleanplugin = require('clean-webpack-plugin');



module.exports = {
    entry:{
        main:'./main.js'  //入口文件
    },
    output:{
        path:path.join(__dirname,'dist'),  //出口文件夹
        filename:'build.js'  //生成的文件名字
    },
    module:{
        loaders:[
            { //以css后缀结尾的文件使用css-loader加载再用style-loader加载
                test:/\.css$/,
                loader:'style-loader!css-loader'  //加载顺序从右到左
            },{   //以js后缀结尾的文件使用babel-loader加载
                test:/\.js$/,
                loader:'babel-loader', //babel-loader依赖于babel-core babel-plugin-transform-runtime babel-preset-es2015
                exclude:/node_modules/  //node_modules文件里的文件不加载
            },{  //以vue后缀结尾的文件使用vue-loader加载
                test:/\.vue$/,
                loader:'vue-loader'  //vue-loader依赖于vue-template-compiler
            }
        ]
    },
    plugins:[
        //此插件的作用是以./index.html为模版插入build.js然后重命名为idx.html放到dist文件夹下
        new htmlplugin({  
            template:'./index.html',
            filename:'idx.html'
        }),
        new cleanplugin(['dist'])  //每次运行webpack的时候首先删除dist文件夹
    ]
}

package.json

{
  "name": "00",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.29.0",
    "style-loader": "^0.18.2",
    "vue": "^2.4.2",
    "vue-loader": "^12.2.2",
    "vue-template-compiler": "^2.4.2",
    "vuex": "^2.3.1",
    "webpack": "^3.3.0"
  }
}

main.js


import vue from 'vue';
import app from './app.vue';
import vuex from 'vuex';

vue.use( vuex );

var store = new vuex.Store({
    state:{
        users:[
            { name:'tom' , addr:'usa' },
            { name:'jim' , addr:'chn' },
            { name:'tim' , addr:'kor' }
        ]
    },
    mutations:{
        add( state , data ){
            state.users.push( data )
        },
        del( state , i ){
            state.users.splice( i , 1 )
        }

    },
    actions:{
        addUser( {commit} , data ){
            commit('add',data)
        },
        delUser( {commit} , i ){
            commit( 'del' , i )
        }
    },
    getters:{
        allUsers(state){
            return state.users
        }
    }
})


new vue({
    el:'#app',
    store,
    render: c => c(app)
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

</body>
</html>

app.vue

<template>
    <div>
        <div style="margin:10px;">
            <input type="text" v-model='obj.name'><br>
            <input type="text" v-model='obj.addr'><br>
            <button @click='addUser'>新增用户</button>
        </div>
        <button @click='getAll'>获取所有用户</button>
        <div>
            <li v-for='(item,index) in users' :key='index'>
                <a href="javascript:;">{{item.name}}</a>
                <a href="javascript:;">{{item.addr}}</a>
                <a href="javascript:;" @click='del(index)'>删除用户</a>
            </li>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                obj:{}
            }
        },
        methods:{
            getAll(){
                console.log( this.$store.getters.allUsers )
            },
            addUser(){
                this.$store.dispatch( 'addUser' , {name:this.obj.name , addr:this.obj.addr} )
            },
            del(i){
                this.$store.dispatch( 'delUser' , i )
            }
        },
        created(){

        },
        computed:{
            users(){
                return this.$store.getters.allUsers 
            }
        }
    }
</script>
<style scoped>

</style>

.babelrc

{
    "presets":["es2015"],
    "plugins":["transform-runtime"]
}

运行webpack

生成dist文件夹
这里写图片描述

idx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

<script type="text/javascript" src="build.js"></script></body>
</html>

运行结果

这里写图片描述

新增一个用户
这里写图片描述

删除用户
这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^