记简书--vuex学习

爱被打了一巴掌 2022-10-01 04:59 243阅读 0赞

简书链接地址： [www.jianshu.com/p/a804606ad…][www.jianshu.com_p_a804606ad].  
vuex 使用注意点 [www.jianshu.com/p/3391cfb11…][www.jianshu.com_p_3391cfb11]  
官方文档 ：[vuex.vuejs.org/zh/guide/mo…][vuex.vuejs.org_zh_guide_mo]  
印象深刻：因为平时比较少用mudules，因此看到这句话，通俗易懂

#### Modules ####

> **由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就可能变得相当的臃肿,为了解决以上的问题，vuex允许我们将store对象分割成模块。每个对象拥有自己的state、mutaction、action，getter、（甚至是嵌套子模块———从上至下进行同样形式的分割）**

const moduleA={
        state:{...},//理解为data
        getter:{...}，//理解为computed
        mutactions：{..}//理解为methods
        action：{...},//里面为异步提交
    }
    const moduleB={
        state：{...},
        getter:{...},
        mutations:{...},
        action:{...}
    }
    const store=new Vuex.Store({
       modules：{
           a:moduleA,
           b:moduleB
       }
    })
    //调用时
    this.$store.state.a
    this.$store.state.b
    复制代码

> this.$store.dispatch('模块中的方法')  
> store 后面不需要加 a。除了 state 是分模块的，其他 mutations 和 actions 都不分模块，因此规划的时候要注意不要重名！

##### vuex namespaced的作用以及使用方式 !(避免重名) #####

const moduleB={
       namespaced: true,
        state：{...},
        getter:{
            test(){}
        },//getters['b/test']
        mutations:{
            test(state){
                console.log('test namespaced')
            }
        },
        action:{...}
    }
    this.$store.commit("b/test")
    
    复制代码

> getters和mutation都可以改变state的值,区别在于是否存在缓存

mapState mapGetters mapActions mapMutations

computed: {
    ...mapState('some/nested/module', {
      a: state => state.a,
      b: state => state.b
    }),
     ...mapGetters('some/nested/module', {
      a: state => state.a,
      b: state => state.b
    })
    },
    methods: {
    ...mapActions('some/nested/module', [
      'foo', // -> this.foo()
      'bar' // -> this.bar()
    ]),
     ...mapMutations('some/nested/module', [
      'foo', // -> this.foo()
      'bar' // -> this.bar()
    ])
    }
    
    如果是多个
    ...mapState({
          A: state => state.moduleA.A,
          B: state => state.moduleB.A,
       }
        ...mapActions([
      'some/moduleA/foo', 
      'some/moduleB/bar' 
    ])
    
    方法和state不需要全部引进页面 可直接 调用 this.$store.state.moduleA.A,this.$store.dispatch('moduleA/A方法')
    复制代码

转载于:https://juejin.im/post/5cb7e26e6fb9a0688b5747dd

[www.jianshu.com_p_a804606ad]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fa804606ad8e9
[www.jianshu.com_p_3391cfb11]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F3391cfb1180e
[vuex.vuejs.org_zh_guide_mo]: https://link.juejin.im?target=https%3A%2F%2Fvuex.vuejs.org%2Fzh%2Fguide%2Fmodules.html