main.js 中引入vuex
import vuex from 'vuex'
Vue.use(vuex )
new Vue({
// 写入store 共享仓库
store,
render: h => h(App)
}).$mount('#app')
创建一个store 文件夹 下 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//date 放值
state: {
name:0,
showa:0,
nmu:0
},
//computed
getters:{
showa(state){
return state.showa=state.name+5;
}
},
//methods 放置方法
mutations: {
showaa(state){
return state.name=+20;
}
},
actions: {
},
modules: {
}
})
组件中调用 {{$store.state.name}}
mapState 映射
导入
impot {mapState} from 'vuex'
computed:{
...mapState(["name"])
}
{{name}} //打印输出
import {mapGetters} from 'vuex'
computed:{
...mapGetters(["showa"])
},
{{showa}} //打印输出
mutations: {
showaa(state){
return state.name++;
}
},
shAS(){
this.$store.commit('showaa',{num:5}) 值是mutations 的函数名 传递参数为对象
}
<div @click="showaa">ok</div>
import {mapMutations} from 'vuex'
methods: {
...mapMutations(["showaa"])
}
actions: {
Delay(){
return delCategory().then((res)=>{console.log(res) })
}
},
import {mapActions} from 'vuex'
methods: {
...mapActions(["Delay"])
}
created(){
this.Delay()
},
网友评论