詳解vuex的簡單todolist例子

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

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

一個簡單的vuex應用的小例子，一段自己的學習記錄。

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

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

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

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

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

2.在src目錄下，新建一個store文件夾，創(chuàng)建一個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)">增加事項</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.完成以后，有個困擾就是在input的v-model中寫inputVal會報錯，請大神幫我解答下。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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