VUEX的使用

//store.js文件基础配置
import vue from 'vue';
import vuex, {mapActions} from "vuex";

vue.use(vuex);
//定义存储变量方法
const state = {
    num: 0
};
//处理逻辑，转换效果方法
const actions = {
    jia(content, value) {
        if (value != '') {
            content.commit('JIA', value)
        }
    }
}
//改变最终定义的state值方法
const mutations = {
    JIA(state, value) {
        state.num += value;
    }
}
//对state的数据进行数据计算方法
const getters={
    numAdd(state){
        return state.num+10;
    }
}
export default new vuex.Store({
    state,
    actions,
    mutations,
    getters
})

//main.js，配置全局挂载
import store from './store/store.js';

new vue({
    store,
}).$mount('#app')


//页面中使用
//第一种方法，基础用法,
<h1>{{$store.state.num}}</h1>
<button @click="adds">加加</button>
adds(){
    let a=2;
    //有要处理的逻辑用dispatch调用actions方法处理
    this.$store.dispatch('jia',a)
    //没有逻辑可以直接调用mutions方法
    this.$store.commit('JIA',a)
}
//第二种方法，简便写法，要先引入简便模式,
//注意使用简便模式，上方定义的方法要有（）传入值
<h1>{{num}}</h1>
<button @click="adds(2)">加加</button>
import {mapActions,mapState} from 'vuex'
computed: {
    ...mapState(['num'])
},
methods:{
    ...mapActions({adds,'jia'})
}