快捷導(dǎo)航

詳解vuex的簡(jiǎn)單todolist例子

更新時(shí)間：2019年07月14日 08:31:05 作者：life96321

這篇文章主要介紹了詳解vuex的簡(jiǎn)單todolist例子,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一個(gè)簡(jiǎn)單的vuex應(yīng)用的小例子，一段自己的學(xué)習(xí)記錄。

todolist就是一個(gè)簡(jiǎn)單的輸入框，一個(gè)按鈕，一個(gè)文本顯示區(qū)域，可以逐條進(jìn)行刪除。

1.在用vue-cli生成好的HelloWorld.vue文件中直接寫代碼，先刪除所有的自帶代碼

<template>
 <div class="hello">
  <input type="text">
  <button>增加事項(xiàng)</button>
  <ul>
   <li>item</li>
  </ul>
 </div>
</template>

要把`input`中的值在經(jīng)過`button`點(diǎn)擊后，顯示在`li`中，`input`有`v-model`屬性進(jìn)行值的綁定，

讓`li`的數(shù)據(jù)是一個(gè)數(shù)組。相當(dāng)于在數(shù)組中push input的值。

2.在src目錄下，新建一個(gè)store文件夾，創(chuàng)建一個(gè)index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  inputVal: 'lily',
  list: ['1', '2', '3']
 },
 mutations: {
  changeListValue(state, inputVal) {
   state.list.push(inputVal)
   state.inputVal = ''
  },
  handleDel(state, idx) {
   state.list.splice(idx, 1)
  }
 },
 actions: {
  changeListValue: ({commit}, inputVal) => {
   return commit('changeListValue', inputVal)
  },
  handleDel: ({commit}, idx) => {
   return commit('handleDel', idx)
  }
 }
})
export default store

3.回到HelloWorld.vue

<template>
 <div class="hello">
  <input v-model="$store.state.inputVal" type="text">
  <button @click="changeListValue(inputVal)">增加事項(xiàng)</button>
  <ul v-for="(item, idx) in list">
   <li @click="handleDel(idx)">{{item}}</li>
  </ul>
 </div>
</template>

<script>
 import {mapState, mapActions} from 'vuex'
 export default {
  name: 'HelloWorld',
  computed: {
   ...mapState(['list', 'inputVal'])
  },
  methods: {
   ...mapActions(['changeListValue', 'handleDel'])
  }
 }
</script>

4.完成以后，有個(gè)困擾就是在input的v-model中寫inputVal會(huì)報(bào)錯(cuò)，請(qǐng)大神幫我解答下。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
Vue+Vant實(shí)現(xiàn)下拉加載功能
為了像微信一樣方便地加載更多歷史消息，這篇文章將為大家介紹我們?nèi)绾问褂胿ant組件來實(shí)現(xiàn)下拉加載功能，感興趣的小伙伴可以跟隨小編一起了解一下
2023-06-06
vue-router4版本第一次打開界面不匹配路由問題解決
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
webpack + vue 打包生成公共配置文件（域名）方便動(dòng)態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名）方便動(dòng)態(tài)修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實(shí)現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標(biāo)簽內(nèi)添加任何內(nèi)容,可以為組件生成一個(gè)唯一的哈希值,從而實(shí)現(xiàn)樣式的定位,本文通過實(shí)例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧
2025-01-01
vue通過定時(shí)器實(shí)現(xiàn)垂直滾動(dòng)公告
這篇文章主要為大家詳細(xì)介紹了vue通過定時(shí)器實(shí)現(xiàn)垂直滾動(dòng)公告，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
$vue文本識(shí)別"\n"換行問題的解決方式$
vue文本識(shí)別"\n"換行問題的解決方式
在頁(yè)面中經(jīng)常會(huì)遇到自定義文本,如果文本過長(zhǎng)就需要換行,在HTML中可以通過標(biāo)簽換行,也可以通過\n轉(zhuǎn)椅字符換行,下面這篇文章主要給大家介紹了關(guān)于vue文本識(shí)別“\n”換行問題的解決方式,需要的朋友可以參考下
2022-11-11
詳解vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法
這篇文章主要為大家介紹了vue+nodejs獲取多個(gè)表數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue制作toast組件npm包示例代碼
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10