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>
(adsbygoogle = window.adsbygoogle || []).push({});