[三分钟笔记]vuex使用简洁笔记

深碍√TFBOYSˉ_ 2022-11-05 05:28 128阅读 0赞

0、vuex是什么：全局的状态存储仓库

1、为何要用：主要可以解决兄弟、或无关联组件之间、全局的数据存储传递的问题

2、使用方法:

state属性 可以看做全局的data

getters属性 可以看做全局的computed属性

mutations 可以看做全局的methods方法

actions 可以看做全局的异步调用methods方法

modules  一整个模块 略

3、代码引入：main.js

import Vuex from 'vuex'
        Vue.use(Vuex)
        const store = new Vuex.Store({
            state: { // 把state看出全局的data
                name: 'xl'
            },
            getters: { // 全局的computed属性
                 fullName: state =>{
                     return '我的名字叫'+state.name
                 }
            },
            mutations: { //全局的methods方法    回调函数使用必须用this.$store.commit()
                changeNameFun(state, payload) {
                    state.name = payload
                }
            },
            actions: {  //提交mutations  允许异步操作 
                changeNameFunAsync(context, payload) {
                    setTimeout( ()=>{
                        context.commit('changeNameFun', payload)
                    }, 2000);
                }
            }
        })
        new Vue({
            el: '#app',
            store,  // 将store挂载到vue实例当中
            render: h=> h(App)
        })

3.1、代码引入 另一种写法 将store分离出来新建一个store.js页  然后向外导出整个vuex对象

main.js文件引入
    import store from './store'; //在同级新建store.js文件  引入store对象
    new Vue({
      router,
      store,  // 将store挂载到vue实例当中
      render: h => h(App)
    }).$mount('#app')

新建的文件store.js
    
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    
    export default new Vuex.Store({
        state: { // 把state看出全局的data
                name: 'xl'
        },
        getters: { // 全局的computed属性
             fullName: state =>{
                 return '我的名字叫'+state.name
             }
        },
        mutations: { //全局的methods方法    回调函数使用必须用this.$store.commit()
                changeNameFun(state, payload) {
                    state.name = payload
                }
        },
        actions: {  //提交mutations  允许异步操作 
            changeNameFunAsync(context, payload) {
                setTimeout( ()=>{
                     context.commit('changeNameFun', payload); //在actions里调mutations属性的函数，第一个参数是方法名，第二个是数据
                }, 2000);
            }
        }
    })

4、在page.vue中的使用

this.$store.state.name     //定义的变量name
                   this.$store.getters.fullName   //定义的getters fullName
                   changeNameFun() { this.$store.commit('changeNameFun', 'xl小姐姐') } // 通过commit方法，传进去第一个参是方法名，第二个参是数据
                   changeNameFunAsync() { this.$store.dispatch('changeNameFunAsync', 'xl小姐姐爱coding')}  //通过dispatch方法，传进去第一个参是方法名，第二个参是数据

5、modules  略