Module
store
index.js
module
zj.js
zj.js
const zj={
state={},
getters={},
mutations={},
actions={},
}
export default zj
index.js
const store=new Vuex.Store({
modules:{
a:zj
}
})
mapState(computed) mapGetters(computed) mapMutations(methods) mapActions(methods)辅助函数
//
computed:{
msg(){
return this.$store.state.msg
}
}
// 组件的computed无法使用
import mapState from 'vuex'
// 一
computed: mpaState({
msg(state){
return state.msg
}
})
// 二
computed: mapState({
msg: state=>state.msg,//this.改变
msg:'msg' //添加别名
})
// 三
computed:{
...mapState(['msg','msg2']),
// 其它计算属性
}
state
/*
state--存储组件中的数据
getters--从store中派生出新的数据（响应式）
mutations--同步改变state中的数据
actions--异步获取数据、并提交mutation，通过mutation修改state
getters：{
getter名字（state,getters）{
//state store状态 getters 其他getter
}
}
mutations：{
mutation名字（state,payload）{
//通过payload改变state 可以直接修改
}
}
actions：{
action名字（{context}，payload){
//异步获取数据，调用context.commit将数据提交mutation，mutation接收后修改state
}
}
组件事件中commit mutation
action中 commit mutation
组件事件中dispatch action
组件生命周期钩子函数 dispatch action
*/
// <div @click='changeState('123')'>
// {{msg}}
// {{$store.state.msg}}
// </div>
//store filter 筛选数据
const store=new Vuex.Store({
state:{
msg:'数据'
},
getters:{
//getters和computed类似 可接收State getters
msgData(state,getters){
return getters.msg.filter(item=>item.data)
},
getMsgDataById(state){
//返回一个函数
return (id)=>{
}
}
},
mutations:{
//提交 同步
//需要commit 触发 对应组件的methods函数中触发mutations this.$store.commit('mutation',数据)
//第一个参数 state mutation：更改state的唯一
//第二个参数 payload 载荷 第二个参数 传入的数据 尽量为对象
changeState(state,payload){
//改变数据
state.msg=payload
}
},
actions:{
// 分发
// dispatch
// 所有异步操作 请求数据 通过mutations修改state 不能直接修改数据
syncChange(context,payload){ //context 阉割版store 包含commit、dispatch、getters、state 也可以携带载荷
// 通过mutations修改数据
context.commit('changeState')
//actions 最后 一定是 commit mutations
},
syncChange({context,state},payloa){ //解构赋值 参数解构 只能够获取 不能修改
commit('changeState')
}
}
})
const app=new Vue({
el:'#app',
store,
computed:{
msg(){
return this.$store.state.msg
},
//函数名可与store中不一致
msgData(){
return this.$store.getters.msgData
},
getMsgDataById(){
//调用getters返回的函数
return this.$store.getters.getMsgDataById(2)
}
},
methods:{
changeState(payload){
//出发mutations中的事件
this.$store.commit('changeState',payload)
//对象方式提交
this.$store.commit({
type:'changeState',
数据:值,
数据2:值
})
},
syncChange(){
// 分发
this.$store.dispatch('syncChange')
}
}
})
Mutation 更改vuex store中状态的唯一方法
字符串mutation名 常量
const str='abc'
const obj={
['字符串']:(){}, //可以用字符串表示方法名
[str]:(){}
}
const mutationsName={
setName:'setName',
setAge:'setAge'
}
const store=new Vuex.Store({
store,
mutations:{
[mutationsName.setName](){
}
}
})
const app=new Vue({
el:'#app',
methods:{
fn(){
this.$store.commit(mutationsName.setName)
}
}
})
//mutation-type.js 存储所有mutations名 直接 修改 设置state
export const SOME_MUTATION='SOME_MUTATION'
Actions
cli中使用vuex
/*
//组件化store
store
index.js
modules
各组件对应的store
// cli中使用vuex
src文件夹下新建store文件夹及index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.user(Vuex)
const state={}
const getters={}
const mutations={}
const actions={}
const store = new Vuex.Store({
state,getters,mutations,actions
})
export default store
main.js
import store from ' xxx '
const app=new Vue({
store
})
*/
