如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1：mutations触发状态 （同步状态）
2：getters计算属性
getter不能使用箭头函数，会改变this的指向
在store.js添加getters
//count的参数就是上面定义的state对象
3：actions (异步状态)
在store.js添加actions
在组件中使用
4：modules 模块
适用于非常大的项目，且状态很多的情况下使用，便于管理
修改store.js
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用 //方法三 computed: mapState([ 'count' ]),
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
// 计算 const getters = {
count(state){ return state.count + 66 }
} export default new Vuex.Store({
state,
mutations,
getters
})
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
组件中使用
<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义常量 const state = { count: 1 } // mutations用来改变store状态 同步状态 const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} // 计算属性 const getters = {
count(state){ return state.count + 66 }
} // 异步状态 const actions = {
jiaplus(context){
context.commit('jia') //调用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被执行了，然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
state,
mutations,
getters,
actions
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{ // 这里是数组的方式触发方法 ...mapMutations([ 'jia', 'jian' ]), // 换一中方式触发方法 用对象的方式 ...mapActions({
jiaplus: 'jiaplus',
jianplus: 'jianplus' })
}
} </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} const getters = {
count(state){ return state.count + 66 }
} const actions = {
jiaplus(context){
context.commit('jia') //调用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被执行了，然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
}
//module使用模块组的方式 moduleA const moduleA = { state, mutations, getters, actions }
// 模块B moduleB const moduleB = { state: { count:108
}
} export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
蓝蓝 http://www.lanlanwork.com