基础
这个状态自管理应用包含以下几个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意:
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
state用来存储模块中使用的数据
mutations是用来存储操作state中的数据的方法
action是用来存储异步的方法
vuex中修改state 只能是mutations action 不是直接修改状态 而是提交 mutation mutation去修改state
特点: vuex规定 mutation不要包含异步请求,action可以包含
我们来简单写一个数字加减的方法
vue项目中的列表如下,在./src/store/index.js中操作Vuex的状态,其中的代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 输出Vuex的数据
export default new Vuex.Store({
state: {
num: 10
},
mutations: {
addNum (state, num) {
state.num += num
},
reduceNum (state, num) {
state.num -= num
}
},
actions: {
addNumAsync ({ commit }, n) {
setTimeout(() => {
commit('addNum', n)
}, 2000)
}
},
modules: {
}
})
在./src/main.js中接受Vuex的数据后,我们就可以在组件调用期中的数据
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 接受Vuex的数据
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
最后,在Home组件中调用这些数据和方法
<template>
<div>
<h1>
我是home页
</h1>
<div class="num">
<button @click="add">增加</button>
<button @click="addAsync">异步增加</button>
{{$store.state.num}}
<button @click="reduce">减少</button>
</div>
</div>
</template>
<script>
export default {
mounted () {
console.log(this)
},
methods: {
// 提交mutation使用$store.commit
add () {
this.$store.commit('addNum', 1)
},
reduce () {
this.$store.commit('reduceNum', 2)
},
addAsync () {
// 提交action
this.$store.dispatch('addNumAsync', 3)
}
}
}
</script>
<style lang="scss" scoped>
h1{
color: red;
}
</style>
这样我们就可以实现对state中数据num的增加和减少以及异步增加的功能
Vue提供助手函数 简化vuex操作
mapState 简化 组件中 获取state步骤
mapMutations 简化组件中 提交mutation的操作
mapActions 简化组件中 触发action的操作
import { mapState, mapMutations, mapActions } from 'vuex
{
methods: {
...mapMutations(['addNum']),
...mapActions(['addNumAsync'])
// 会在methods定义 的和mutations或者action同名的方法 用于提交mutations或actions
},
computed: {
...mapState(['num', 'num2'])
//就在组件中 新增了 2个计算属性 num num2他们依赖是 store中的state中的同名数据
}
}
使用状态
{{ num }}
提交mutation
this.addNum(参数)
提交action
this.addNumAsync(参数)
getters
相当于 vuex中的 计算属性 使用场景:某个 状态 需要 依赖另一个状态 存在,当这个状态 改变时,getter会重新计算
store = {
state: {
num: 10
},
getters: {
numDouble (state) {
return state.num*2
}
}
}
在组件中如何获取
1,this.$store.getters.numDouble
2,通过助手函数
import { mapGetters } from 'vuex'
computed: { // 直接通过this.numDouble使用
...mapGetters(['numDouble'])
}
注意:
不要直接修改getter的值 ,vuex也没有提供修改getter的方法,应该去修改依赖 state中的数据
module
默认store是单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
如何在组件中使用
获取
this.$store.state.模块.num
如何提交mutations 或者action
1,this.$store.commit('addNum')
this.$store.dispatch('addNumAsync')
注意:
mutations和actions默认提交 没有模块化,会导致
所以的模块中 同名mutation或者action同时触发
?如何解决这个问题
你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
const moduleA = {
namespaced: true,
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA
}
})
提交
this.$store.commit('a/addNum')
如果助手函数
methods: {
...mapMutations(['a/addNum'])
}
可以通过
this['a/addNum'](params)
methods: {
...mapMutations('a', ['addNum'])
}
this.addNum() 提交a模块中的addNum
我们也可以将本来都写在index中的数据分离
index.js写成
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import modulea from './modulea'
Vue.use(Vuex) // Vue原型中会加入一个实例对象 $store
// 初始化store
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
modules:{
a: modulea
}
})
export default store
将原本卸载index的数据单独写一个js文件
state.js
export default {
num: 10
}
mutation.js
export default {
addNum (state, num) {
state.num += num
},
reduceNum (state, num) {
state.num -= num
}
}
action.js
export default {
addNumAsync ({commit}, n) {
console.log(n)
setTimeout(() => {
commit('addNum', 5)
}, 2000)
}
}
getter.js
export default {
numDouble (state) {
return state.num * 2
}
}