Vue.use(Vuex)
1.vuex哪些属性?
export default new Vuex.Store({
state:{全局共享属性 xxx:'123'}, 页面获取 {{$store.state.xxx}}
getters:{针对数据,二次计算 changeStr(state){return state.xxx+'yyy'}},
mutations:{存放同步方法},
actions:{存放异步方法,并且提交mutations},
modules:{把vuex进行模块之间划分}
})
2.vuex的state的获取(两种方式)
1){{$store.state.xxx}}
2)使用辅助函数:mapState
import { mapState } from 'vuex'
export default{
computed:{
...mapState(['str'])//this.str
}
}
区别:第一种可以直接修改vuex中state的值,第二种不行
3.vuex的getters的获取(两种方式)
1)$store.getters.changeStr
2)使用辅助函数:mapGetters
import { mapGetters } from 'vuex'
export default{
computed:{
...mapGetters(['changeStr'])
//this.changeStr
}
}
没有区别,都不可以改 v-model会报错
4.vuex的modules的使用
user.js ->
export default{ state:{ token:'dfddff' } }
import user from '../modules/user'
modules:{user}
子页面
export default{
computed:{
...mapState({
token:state => state.user.token
})
}
}
5.vuex的mutations 与 actions的区别
mutations mutations:{
add( state ){
state.number+=2
}
},
import { mapMutations } from 'vuex
export default{
methods:{
...mapMutations(['add'])
}
}
// {{ $store.state.number }}
actions actions:{
addNumber({commit},state){
state.number+=2
}
}
import { mapActions } from 'vuex
export default{
methods:{
...mapActions(['addNumber'])
}
}
// {{ $store.state.number }}
mutations 与 action 存放全局方法的,这个全局方法return的值拿不到
区别:
1)mutations 同步的;actions 返回是Promise对象,他可以执行相关异步操作
2)mutation用来修改state的值,actions的作用是用来提交mutations
vuex持久化存储
vuex本身不是持久化存储,vuex是一个状态管理仓库(state:全局属性)==》 存放全局属性的地方