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/>',
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>