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

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

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

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

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

讓`li`的數據是一個數組。相當于在數組中push input的值。

2.在src目錄下，新建一個store文件夾，創建一個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會報錯，請大神幫我解答下。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。