Pulse Of The Blogosphere » CRUD – StudentList with Vuex

HOME / Javascript / VueJS / CRUD – StudentList with Vuex

CRUD – StudentList with Vuex

Author: admin - Posted: 01/10/22 - Update: 03/11/22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue: Basic CRUD with Vuex</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            padding: 0 0.5rem;
            border: 1px solid black;
        }

        .loader {
            border: 2px solid #f3f3f3;
            border-radius: 50%;
            border-top: 2px solid green;
            width: 12px;
            height: 12px;
            animation: spin 0.5s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <button v-on:click="student={ username: '', email: '', id: '' }">New Student</button><br />
        <input type="text" placeholder="username" v-model="student.username" /><br />
        <input type="text" placeholder="email" v-model="student.email" /><br />
        <button @click="saveStudent">{{student.id ? 'Update Student':'Create Student'}}</button><br /><br />
        <input type="text" placeholder="Search..." v-model="filter">
        <button @click="filter=''">x</button>
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>User</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in filterStudent" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td>
                        <button @click="getStudentByID(item.id)">Edit</button>
                        <button @click="deleteStudent(item.id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table><br />
        <select v-model="url_fakeStudent">
            <option value="https://jsonplaceholder.typicode.com/users">https://jsonplaceholder.typicode.com/users
            </option>
            <option value="https://fakestoreapi.com/users?limit=10">https://fakestoreapi.com/users?limit=10</option>
        </select><br />
        <button @click="getStudentsOnline">Get Student Online</button>
        <div v-show="loading" class="loader"></div>
    </div>

    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- <script src="https://unpkg.com/vuex@4/dist/vuex.global.js"></script> -->
    <script src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vuex@4.1.0/dist/vuex.global.js"></script>

    <script>
        const uuid = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);

        const api_students = {
            sleep(time) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, time);
                })
            },
            async getOnline(url) {
                const response = await fetch(url)
                const studentList = await response.json()
                localStorage.setItem('studentList', JSON.stringify(studentList))
                return studentList
            },
            async getByID(id) {
                await this.sleep(500)
                const studentList = JSON.parse(localStorage.getItem('studentList')) || []
                const student = studentList.find(item => item.id == id)
                return student
            },
            async create(student) {
                await this.sleep(500)
                const studentList = JSON.parse(localStorage.getItem('studentList')) || []
                studentList.push(student)
                localStorage.setItem('studentList', JSON.stringify(studentList))
                return student
            },
            async read() {
                await this.sleep(500)
                const studentList = JSON.parse(localStorage.getItem('studentList')) || []
                return studentList
            },
            async update(student) {
                await this.sleep(500)
                const studentList = JSON.parse(localStorage.getItem('studentList')) || []
                const find_student = studentList.find(item => item.id == student.id)
                find_student.username = student.username
                find_student.email = student.email
                localStorage.setItem('studentList', JSON.stringify(studentList))
                return find_student
            },
            async delete(id) {
                await this.sleep(500)
                const studentList = JSON.parse(localStorage.getItem('studentList')) || []
                const find_student = studentList.find(item => item.id == id)
                const newList = studentList.filter(item => item.id !== id)
                localStorage.setItem('studentList', JSON.stringify(newList))
                return find_student
            },
        }
    </script>
    <script>
        const store = Vuex.createStore({
            state() {
                return {
                    studentList: [],
                    loading: false,
                }
            },

            actions: {
                async action_startLoad(context, payload) {
                    context.commit("startLoading")
                },
                async action_endLoad(context, payload) {
                    context.commit("endLoading")
                },
                async action_fakeStudentsOnline(context, payload) {
                    context.commit("startLoading")
                    const studentList = await api_students.getOnline(payload)
                    context.commit("setStudentList", studentList)
                    context.commit("endLoading")
                },
                async action_getStudents(context) {
                    context.commit("startLoading")
                    const studentList = await api_students.read()
                    context.commit("setStudentList", studentList)
                    context.commit("endLoading")
                },
                async action_createStudent(context, payload) {
                    context.commit("startLoading")
                    const student = await api_students.create(payload)
                    context.commit("createStudent", student)
                    context.commit("endLoading")
                },
                async action_updateStudent(context, payload) {
                    context.commit("startLoading")
                    const student = await api_students.update(payload)
                    context.commit("updateStudent", student)
                    context.commit("endLoading")
                },
                async action_deleteStudent(context, payload) {
                    context.commit("startLoading")
                    const student = await api_students.delete(payload)
                    context.commit("deleteStudent", student)
                    context.commit("endLoading")
                },
            },

            mutations: {
                startLoading(state) {
                    state.loading = true
                },
                endLoading(state) {
                    state.loading = false
                },
                setStudentList(state, payload) {
                    state.studentList = payload;
                },
                createStudent(state, payload) {
                    state.studentList.push(payload);
                },
                updateStudent(state, payload) {
                    const find_student = state.studentList.find(item => item.id == payload.id)
                    find_student.username = payload.username
                    find_student.email = payload.email
                },
                deleteStudent(state, payload) {
                    state.studentList = state.studentList.filter(item => item.id !== payload.id)
                },
            },

            getters: {
                studentList: state => state.studentList,
                loading: state => state.loading,
            }
        })

        const RootComponent = {
            data() {
                return {
                    student: { username: '', email: '', id: '' },
                    filter: "",
                    url_fakeStudent: "https://jsonplaceholder.typicode.com/users",
                }
            },
            created() {
                this.$store.dispatch("action_getStudents")
            },
            methods: {
                getStudentsOnline() {
                    console.log(this);
                    this.$store.dispatch('action_fakeStudentsOnline', this.url_fakeStudent)
                },
                saveStudent() {
                    if (!this.student.id) {
                        this.student.id = uuid();
                        this.$store.dispatch('action_createStudent', { ...this.student })
                    } else {
                        this.$store.dispatch('action_updateStudent', { ...this.student })
                    }
                    this.student = { username: '', email: '', id: '' }
                },
                async getStudentByID(id) {
                    this.$store.dispatch('action_startLoad')
                    this.student = await api_students.getByID(id)
                    this.$store.dispatch('action_endLoad')
                },
                deleteStudent(id) {
                    this.$store.dispatch('action_deleteStudent', id)
                }
            },
            computed: {
                studentList() {
                    return this.$store.getters.studentList
                },
                loading() {
                    return this.$store.getters.loading
                },
                filterStudent() {
                    return this.studentList.filter(item => item.username.includes(this.filter))
                }
            }
        }
        const app = Vue.createApp(RootComponent).use(store).mount("#app")

    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

<!DOCTYPE html>

<head>

<title>Vue: Basic CRUD with Vuex</title>

<style>

table {

border-collapse: collapse;

}

th,

td {

padding: 0 0.5rem;

border: 1px solid black;

}

.loader {

border: 2px solid #f3f3f3;

border-radius: 50%;

border-top: 2px solid green;

width: 12px;

height: 12px;

animation: spin 0.5s linear infinite;

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

</style>

</head>

<body>

<button v-on:click="student={ username: '', email: '', id: '' }">New Student</button><br />

<button @click="saveStudent">{{student.id ? 'Update Student':'Create Student'}}</button><br /><br />

<table>

<thead>

<tr>

<th>Email</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

<td>{{index + 1}}</td>

<td>{{item.username}}</td>

<td>{{item.email}}</td>

<td>

<button @click="deleteStudent(item.id)">Delete</button>

</td>

</tr>

</tbody>

</table><br />

<option value="https://jsonplaceholder.typicode.com/users">https://jsonplaceholder.typicode.com/users

</option>

<option value="https://fakestoreapi.com/users?limit=10">https://fakestoreapi.com/users?limit=10</option>

</select><br />

<button @click="getStudentsOnline">Get Student Online</button>

</div>

const uuid = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);

const api_students = {

sleep(time) {

return new Promise((resolve, reject) => {

setTimeout(() => {

resolve()

}, time);

})

async getOnline(url) {

const response = await fetch(url)

const studentList = await response.json()

localStorage.setItem('studentList', JSON.stringify(studentList))

return studentList

async getByID(id) {

await this.sleep(500)

const studentList = JSON.parse(localStorage.getItem('studentList')) || []

const student = studentList.find(item => item.id == id)

return student

async create(student) {

await this.sleep(500)

const studentList = JSON.parse(localStorage.getItem('studentList')) || []

studentList.push(student)

localStorage.setItem('studentList', JSON.stringify(studentList))

return student

async read() {

await this.sleep(500)

const studentList = JSON.parse(localStorage.getItem('studentList')) || []

return studentList

async update(student) {

await this.sleep(500)

const studentList = JSON.parse(localStorage.getItem('studentList')) || []

const find_student = studentList.find(item => item.id == student.id)

find_student.username = student.username

find_student.email = student.email

localStorage.setItem('studentList', JSON.stringify(studentList))

return find_student

async delete(id) {

await this.sleep(500)

const studentList = JSON.parse(localStorage.getItem('studentList')) || []

const find_student = studentList.find(item => item.id == id)

const newList = studentList.filter(item => item.id !== id)

localStorage.setItem('studentList', JSON.stringify(newList))

return find_student

}

</script>

const store = Vuex.createStore({

state() {

return {

studentList: [],

loading: false,

}

actions: {

async action_startLoad(context, payload) {