Vuex-完整例子listTodo

Vuex主要涉及到state，getters，mutations，action，

state：是驅動應用的數據源

getters ：從state中派生出的一些狀態，如獲取數據的數組的長度，方便其餘組件獲取使用

mutations：更改state的惟一方法，意思是修改，增長等處理state的方法，

action：提交mutation，而不是直接變動狀態。

上述所表述的狀態都是state

App.vue頁面

<template>
  <div id="app1">
    <h1>this is vuex todo example</h1>
    <todo-input></todo-input>
    <todo-list></todo-list>
    <p>todoList 數量：{{todoCount}}</p>
   
  </div>
</template>
<script>
import todoInput from "./components/input.vue"
import todoList from "./components/list.vue"
import {mapGetters} from "vuex"
export default {
  name: 'app',
  data(){
    return {
      msg:""
    }
  },
  computed:{
    ...mapGetters({
      todoCount:"nCounts"
    })
  },
  components:{
    todoInput,
    todoList
  }
}
//上面的computed計算屬性也能夠寫成以下形式,獲取getters裏的數據
// computed:{
//    todoCount(){
//     return this.$store.getters.nCounts
//    }
//   },
</script>
<style>
@import './assets/css/public.css';
*{font-family:"微軟雅黑" }
a{color:#05abce;}
li{margin-bottom:15px;}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app1',
  store,
  template: '<App/>',//至關於在html上加<App></App>,這樣才能在頁面上展現App組件
  components: { App }
})

新建store文件夾，在裏面中建index.js文件，index.js內容

import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        message:"",
        aTodos:[{id:0,value:"default"}]
    },
    getters:{
       nCounts(state){
        return state.aTodos.length
       }
    },
    mutations:{
        //新增item
        onAddTodo(state,item){
            state.aTodos.push(item)
        },
        //刪除item
        onDelTodo(state,index){
            state.aTodos.splice(index,1)
        },
        //設置錯誤信息提示
        onError(state,msg){
            state.message=mgs
        }

    },
    actions:{
        //提交onAddTodo
        onAddTodo(context,item){
            if(item.value!=""){
                context.commit("onAddTodo",item)
                context.commit("onError","")
            }else{
                context.commit("onError","添加失敗")
            }
        },
        //提交onDelTodo
        onDelTodo({commit},index){
            commit("onDelTodo",index)
        }
    },
    modules:{}
});

export default store

input.vue組件

<template>
  <div>
    <input type="text" placeholder="please enter new item" v-model="value" v-on:keyup.enter="addItem">
    <button v-on:click="addItem">新增</button>
  </div>
</template>
<script>
export default{ 
data(){ 
   return{ value:"", id:0 } 
},
methods:{
	addItem:function(){
	  let item={value:this.value,id:++this.id};
	  this.value="";
	  this.$store.dispatch("onAddTodo",item)
	}
}
}
</script>

list.vue組件

<template>
    <div class="todolist">
        <ul>
            <li v-for="(item,index) in aTodos">
                <span>{{item.value}}</span>
                <button v-on:click="del(index)">刪除</button>
            </li>
        </ul>
    </div>
</template>
<script>
import { mapState } from "vuex"
export default {
    // data(){
    // 	return{

    // 	}
    // },
    methods: {
        del(index) {
            this.$store.dispatch("onDelTodo", index)
        }
    },
    computed: {
        ...mapState([
            'aTodos'
        ])
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header {
    margin-bottom: 25px;
}
</style>