学习vue——vuex（state、mutations、actions、getters、分模块）

一、获取公共数据

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 100,
        title: 'zd'
    }
})

export default store

html 的获取方式

// 方法一
<h5>{{ $store.state.count }}</h5>
// 方法二（简写模式）
<h4>{{ count }}-{{ title }}</h4>
import { mapState } from 'vuex'
computed:{
...mapState(['count','title'])
},
 js 获取
created(){
　　console.log(this.$store.state.count)
}

 

二、修改公共数据（mutations）

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 100,
        title: 'zd'
    },
    mutations: {
        updateCount(state,val){
            state.count += val
        }
    }

})

export default store
this.$store.commit('updateCount',20)
created(){
    console.log(this.$store.state.count)
    this.$store.commit('updateCount',20)
    console.log(this.$store.state.count)
  }
简写：...mapMutations(['updateCount'])
<button @click="useFaction">ues</button>
import { mapState,mapMutations } from 'vuex'
methods:{
...mapMutations(['updateCount']),
useFaction(){
this.updateCount(11)
}
},

 

三、异步方法（actions）

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 100,
        title: 'zd'
    },
    mutations: {
        updateCount(state,val){
            state.count += val
        }
    },
    // 异步方法，context指仓库
    actions: {
        asyncFuction(context,val){
            context.commit('updateCount',val)
        }
    }


})

export default store

 

import { mapState,mapMutations,mapActions } from 'vuex'
 methods:{
    ...mapMutations(['updateCount']),
    ...mapActions(['asyncFuction']),
    useFaction(){
      this.asyncFuction(11) // 简写调用
    }
  },
  created(){
    console.log(this.$store.state.count)
    this.$store.dispatch('asyncFuction',100) // 正常调用
    console.log(this.$store.state.count)
  }

 

四、计算属性（getter）

 store/index.js

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 Vue.use(Vuex)
 4 const store = new Vuex.Store({
 5     state: {
 6         count: 100,
 7         title: 'zd',
 8         ls: [2,5,1,7,9]
 9     },
10     mutations: {
11         updateCount(state,val){
12             state.count += val
13         }
14     },
15     // 异步方法，context指仓库
16     actions: {
17         asyncFuction(context,val){
18             context.commit('updateCount',val)
19         }
20     },
21     // 计算属性
22     getters: {
23         getterFaction(state){
24             return state.ls.filter(item => item > 5) // 必须要有返回值
25         }
26     }
27 
28 
29 })
30 
31 export default store

使用

// 方法一
    <h4>{{ $store.getters.getterFaction }}</h4> 
// 方法二
    <h5>{{ getterFaction }}</h5>

computed:{
    ...mapState(['count','title']),
    ...mapGetters(['getterFaction'])
  
  },

 

五、分模块

目录结构

user.js

 1 const state = {
 2     userInfo:{
 3         age: 18,
 4         name: "zhangdan"
 5     },
 6     addr: "朝阳区大屯路16号3-1-1"
 7 }
 8 const mutations = {
 9     userMutationFaction(state,val){
10          state.userInfo = val
11     } 
12 }
13 const actions = {
14     asyncUserAction(context,val){
15         context.commit('userMutationFaction',val)
16     }
17 }
18 const getters = {
19     toUper(state){
20         return state.userInfo.name.toUpperCase()
21     }
22 }
23 
24 export default {
25     namespaced: true,// 命名空间
26     state,
27     mutations,
28     actions,
29     getters
30 }

 

index.js
 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import user from './modules/user'
 4 import settings from './modules/settings'
 5 
 6 Vue.use(Vuex)
 7 const store = new Vuex.Store({
 8     state: {
 9         count: 100,
10         title: 'zd',
11         ls: [2,5,1,7,9]
12     },
13     mutations: {
14         updateCount(state,val){
15             state.count += val
16         }
17     },
18     // 异步方法，context指仓库
19     actions: {
20         asyncFuction(context,val){
21             context.commit('updateCount',val)
22         }
23     },
24     // 计算属性
25     getters: {
26         getterFaction(state){
27             return state.ls.filter(item => item > 5)
28         }
29     },
30     // 导出
31     modules: {
32         user,
33         settings
34     }
35 
36 })
37 
38 export default store

state、getter（原生取法、命名空间取法）

<!-- state 的原生取法 -->
    <p>{{ $store.state.user.addr }}</p>
    <p>{{ $store.state.user.userInfo.name }}</p>
    <p>{{ settings.color }}</p>
    <hr>
    <!-- getter 的原生取法 -->
    <p>{{ $store.getters['user/toUper'] }}</p>
    <!-- state 的命名空间取法 -->
    <p>{{ userInfo }}</p>
    <!-- getter 的命名空间取法 -->
    <p>{{ toUper }}</p>
computed:{
...mapState('user',['userInfo']),
...mapGetters('user',['toUper'])
},

mutations、actions（原生取法、命名空间取法）

 1 methods:{
 2     ...mapMutations('user',['userMutationFaction']),
 3     ...mapActions('user',['asyncUserAction']),
 4     // mutations 的取法
 5     useFaction(){
 6       // 方法一,原生
 7       this.$store.commit('user/userMutationFaction',{
 8         name: 'qiaowenjun',
 9         age:20
10       })
11       // 方法二，命名空间
12       this.userMutationFaction(100)
13     },
14     
15     // actions 的取法
16     useUseAction(){
17       // 方法一,原生
18       this.$store.dispatch('user/asyncUserAction',{
19         name: 'guojiahui',
20         age:24
21       })
22 
23       // 方法二，命名空间
24       this.asyncUserAction({
25         name: 'fenmeilian',
26         age: 45
27       })
28     
29   }
30 },

 

posted @ 2024-09-26 10:51  东方不败--Never  阅读(35)  评论(0)  编辑  收藏  举报