使用vuex做增删改查

来源：互联网发布：网络大数据查询编辑：程序博客网时间：2024/06/06 09:29

源码：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>

运行结果

这里写图片描述

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

删除用户
这里写图片描述

阅读全文

0 0