vuex修改vuex

1、index.js创建vuex

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

Vue.use(Vuex)

export default new Vuex.Store({
  //1、全局状态  初始值
  state: {
    num:66
  },
  //3、加工数据，对数据进行处理
  getters:{
    //参数为state对象
    num2(state){
      return state.num*2-1
    }
  },
  //5、用来同步修改state内的值，修改num的值
  mutations: {
    //6、两个参数（全局状态state，payload参数/一般为对象）
    changeNum(state,payload){
      state.num = payload.num
    }
  },
  //异步修改数据
  actions: {
  },
  //模块化
  modules: {
  }
})

2、vuex.vue中使用数据

<template>
    <div>
<!--        使用时不加this-->
<!--        2、打印结果为66    10、修改后为88-->
        {{$store.state.num}}
<!--        4、数据处理后打印结果为131   11、修改后为175-->
        {{$store.getters.num2}}
<!--        7、添加点击事件-->
        <button @click="change">修改vuex</button>
    </div>
</template>

<script>
    export default {
        name: "vuex",
        created(){
            //num所在位置this.$store.state
            console.log(this.$store.state.num)
            //处理后数据num2在$store.getters中
            console.log(this.$store)
        },
        methods:{
　　　　　　　　//8、change方法
            change(){
                //9、两个参数（方法名，参数payload/一般为对象）
                //传参num为88
                this.$store.commit('changeNum',{num:88})
            }
        }

    }
</script>

<style scoped>

</style>