vuex的基本使用(vuex)

vuex的基本使用

        1. 安装vuex依赖包

npm install vuex --save

       2. 在store文件夹中的index.js文件中：

// 2. 导入vuex包
import Vuex from 'vuex'

Vue.use(Vuex)


// 3. 创建store对象
const store = new Vuex.Store({
    // state 中存放的就是全局共享的数据
    state: { count: 0 },
    mutations: {
        // 第1个参数(state): 表示state对象
        // 第2个参数(step): 接受传递过来的值
        add(state, step) {
            // 变更状态
            state.count += step
        }
    },
    actions: {
        addAsync(context, step) {
            seTimeout(() => {
                context.commit('add', step)
            }, 1000)
        }
    },
    getters: {
        showNum: state => {
            return '当前最新的数量是【"+ state.count +"】'
        }
    }
})

export default store

        4. 将store对象挂载到vue实例中(main.js中)

import store from './store'

new Vue({
    // 控制的区域
    el: '#app',
    // 渲染app根组件
    render: h => h(app),
    // 挂载路由
    router,
    // 将创建的共享数据对象，挂载到 Vue 实例中
    // 所有的组件，就可以直接从 store 中获取全局的数据了
    store
})