Vuex 文档解读

Posted the-last

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex 文档解读相关的知识,希望对你有一定的参考价值。

Vuex 管理状态

state 

 

单一状态树,意思是一个对象包含了全部应用层级状态,Store将作为唯一数据源。

每个应用,仅仅有且只有一个 store 实例!

 

mapState

当一个组件组件组件需要多个状态值时,可以调用 mapState函数赋值给 computed 返回是对象。

 

 

// mapState 基本用法,3种: 箭头函数, 字符串, 函数.

computed:mapState(

      //1,箭头函数 countFromStore:state=>state.count

      //2,字符串  countFromStore: ‘count‘     等价于   state=>state.count

      //3,函数  需要使用组件内数据访问this时,还可以用函数

       countFromStore(state)

             return state.count+this.localCount;

       

),


// 如果同名取Store中的值,可以取count字符串放在数组中传递给 mapState.

computed:mapState([

      ‘count‘    // 可以访问多个状态

]),

// mapState返回对象所以可以扩展computed对象.

computed:

       ...mapState([     

              ‘count‘

       ]),

       localCount() return this.localCount + this.$store.state.count;

 

getters

 

可以吧 getters 当作是 state store的计算属性,传参是state .

Vue.use(Vuex);

conststore=newVuex.Store(

state:

   count:1,

   name:‘NewStation‘,

   todos: [

      id:1, text:‘todos -1‘, done:true ,

      id:2, text:‘todos -2‘, done:false ,

   ]

,

mutations:        // this.$store.commit(‘changeName‘) 触发commit更新store

    increment(state)

        state.count++

    ,

    changeName(state)

         state.name=‘NewPlace‘

     

,

getters:            //  this.$store.getters.doneTodos  获取getters编译后的值

    doneTodos:state=>

         returnstate.todos.filter(todo=>todo.done)[0].done;

    ,


    doneState: (state, getter)=>

         return  getter.doneTodos + ‘getter 作为其他 getter 的传参;

   

);

 

mapGetters

 

辅助函数,,支持2种方式转换,把store中的getters 可以支持传参,映射到局部计算属性。

computed:

...mapGetters([    数组

      ‘doneTodos‘,                               // 可以直接调用

]),

...mapGetters(    对象

       aliasFillname:‘getFillName‘  //给 getter 加别名。

),

 

 

Mutation 

更新 store状态 的唯一方法是提交mutation。 Vuex中的 mutation 类似于事件:每个 mutation 都有自己的事件类型和回调函数,这个回调函数就是我们状态更改的地方,并接受 state 作为第一个参数

 

const store = new Vuex.Store(

 state:

   count: 1

 ,

 mutations:

   increment (state)

     // 变更状态

     state.count++

   

 

)

store.commit(‘increment‘)   只能用这个方式修改状态!

触发mutation更新状态,触发一个叫 increment 类型的事件,并回调执行 这个类型的注册函数

 

提交负载Payload

可以给commit传参,称为 Payload负载,通常是一个对象。

this.$store.commit(‘increment‘,    account: ‘local‘ )

 

对象的风格提交

只给mutation传递对象,表示整个对象被当做 Payload,被解析,mutation中获取的方式是不变的。

this.$store.commit(

     type: ‘increment‘,

     account: ‘local‘

)

 

Mutation需遵守vue响应规则

1,提前在store中初始化所有有声明的属性值

2,获取对象值之后,如需修改推荐调用 Vue.set (obj, ‘newkey‘, ‘newvalue‘) 或者 这样 ...obj, newProp: 123

store的对象放在前。

3,推荐使用常量const方式命名mutation中事件的类型名,也可以不用。

 

Mutation必须是同步函数

 

 

 

Store 对生命周期的影响

 

初始阶段

就是组件实例化和mounted的过程,和从data或props中取值并没有区别。

App                      ---beforeCreate--

App                      ---created---

App                      ---beforeMount---

      Helloworld           ---beforeCreate--

      Helloworld           ---created---

      Helloworld           ---beforeMount---

      Helloworld           ---mounted---

App                      ---mounted---

 

store的state更新阶段

App                      ---beforeUpdate---

      Helloworld              ---beforeUpdate---

      Helloworld              ---updated---

App                      ---updated---

以上是关于Vuex 文档解读的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vuex 操作 Firebase 集合中的文档 [Vuex/Vuexfire]

Vuex的API文档

vuex文档(附加个人理解)

关于Vue vuex vux 文档

当 vuex 文档说它不应该时,为啥 splice 对对象数组类型属性起作用?

vuex最简单最详细的入门文档