Vuex的使用 - 掘金

前言

Vuex是专门为vue开发的状态管理模式，为应用中的组件提供集中式的管理与存储，将相同的状态抽离出来，方便多组件共享状态

Store

export default new Vuex.Store({
    state,
    mutations,
    actions
})

Vuex的核心是Store，是仓库的意思，类似一个容器包含大部分的状态，它的状态存储是响应的，即当Store中的状态发生改变，相应的组件内容也会发生更新，唯一改变状态的方式是显示的提交mutation。

State

const state ={
    count: 1,
    list:[]
}

购物数量{{$store.state.count}}
<button type="button" name="button" @click="increment">增加</button>
<button type="button" name="button" @click="decrement">删减</button>

state定义了数据的数据结构并设置初始化状态，在组件中可通过$store.state.count来获得

Mutation

Vue.use(Vuex)

const state ={
    count: 1,
    list:[]
}

const mutations={
    increment(state,param){
        window.console.log(param)
        state.count+=param
    },
    //接收从组件传过来的参数
    decrement(state){
        state.count--
    }
}
...

使用mutation，是唯一更新应用状态的地方
mutation类似于事件：每一个mutation都有一个字符串类型的type（事件类型）和handler（回调函数，而这个函数就是我们实际进行状态更改的地方，并且会接收state作为其第一个参数），修改状态
mutation必须是同步函数

Action

// 在组件中分发action，可以使用this.$store.dispatch或者使用辅助函数mapActions
  methods: mapActions([
        'increment',// -> 这里映射为 this.$store.dispatch('increment');
        'decrement'// -> 这里映射为 this.$store.dispatch('decrement');
    ]),

Vue.use(Vuex)
    
const state ={
    count: 1,
    list:[]
}

const mutations={
    increment(state,param){
        window.console.log(param)
        state.count+=param
    },
    //接收从组件传过来的参数
    decrement(state){
        state.count--
    }
}

const actions ={
    increment:({commit},param)=>{
        commit('increment',param)
        //提交mutation
    },,
    decrement:({commit})=>{
        commit('decrement')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

Action提交的是mutation，而不是直接变更状态

Action支持任意的异步操作（异步请求数据）

Module

import money from './modules/a'
import count from './modules/b'


Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        money,
        count
    }
})

Vuex允许我们将store分割成模块，每个模块拥有自己的state，mutation，action，getter等,按导出名使用