vuex笔记

state
state.js文件

export default {
    str:'我这是state数据1',
    num: 123
}

1. state直接取值方式

getters.js文件
getters是计算属性

export default {
    // 需要进行逻辑计算时都需要用到getters
    funRun(state) {
        return state.str +'----------'+ '这是getters计算出来的'
    }
}

总结：mapState和mapGetters都放在computed里使用

mutations.js文件---mutations是方法

--------------------------- state.js
// 传参数
    list:[
        {
            name:'张三'
        },
        {
            name:'李四'
        },
        {
            name:'王五'
        }
    ],
    setNameStr: ' '

--------------------------- mutations.js
// 直接进行调用
export default {
    run() {
        console.log('直接进行调用')
    },
     // 不传参数
    setName(state,name) {
        return state.setNameStr = name
     }
    // 传参数
    setName(state,obj) {
        return state.setNameStr = obj.name + '------' + obj.a
    }
}

1. 直接进行调用

2. 在methods中写方法进行调用

3. 在methods中方法传参数

4. 使用常量进行调用方法
   新建 mutation-types.js

export const HOME_VIEW = 'HOME_VIEW'

export const ADD= 'ADD'

mutations.js

import { HOME_VIEW,ADD } from './mutation-types'
export default {
    [HOME_VIEW]() {
        console.log('使用常量进行调用方法')

         // 在mutations里面也可以调用commit (调用commit另外一种方式)
        this.commit('ADD')
    }
   [ADD](){
    console.log('mutations调用commit')
   }
}

使用时

this.$store.commit('HOME_VIEW')
// 或者
 ...mapMutations(['HOME_VIEW']),

actions的使用和mutations的区别

1. mutations 是同步
2. actions 是异步
3. mutations 混合异步调用会导致你的程序很难调试，所以要避免异步操作
4. actions 是提交mutations中的函数方法
5. actions 和 mutations 怎么如何区分同步异步
   a) mutations方法里面加一个setTimeout 这时页面视图会更新，但是数据没有及时更新，所以异步程序很难调试。
   b) actions 方法里面加一个setTimeout 这时页面视图会更新，数据也会及时更新

actions .js

actions 里面必写 commit
export default {
    setNumFun({commit},obj) {
        commit('setNum', obj)
    }
}

mutations.js

export default {
    setNum(state, obj) {
        state.num += obj.a
    }
}

页面使用

Module

image.png

store下的index.js

import { createStore } from 'vuex'

import my from './modules/my'
import list from './modules/list'
export default createStore({
  modules: {
    my,
    list
  }
})

Module下的文件

my.js
export default {
    state: {
        str: '这是my'
    },
    getters:{},
    mutations:{},
    actions: {}
} 

list.js
export default {
    state: {
        str: '这是list'
    },
    getters:{},
    mutations:{},
    actions: {}
} 

页面使用