vuex最小demo

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/momDIY/article/details/86548761

一、创建vuex配置管理文件(store.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        display: 'smooth'
    },
    mutations: {
    // 参数一，指向该vuex对象
    // 参数二，提交时传入的参数
        updateDisplay: (state, displayState)=>{
            state.display = displayState;
        }
    }
})

export default store

二、根组件中引入

import store from './components/common/store'

 new Vue({
    //...
     vuex
 })

三、组件中使用

1.状态读取

    console.log(this.$store.state);

2.状态修改

修改vuex组件内容需使用commit方法。

commit方法接收的第一个参数为要执行的mutation函数名（mutation可以理解为存防修改vuex状态函数的一个合集，修改vuex状态需通过方法mutation对象中的方法实现，了解更多）。

commit方法接收的第二个参数为需要传入的参数。

this.$store.commit('updateDisplay', 'none')

END