Vue-vuex 사용

장면
데이터 집중 식 관리
정의 데이터
store/index.js

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

Vue.use(Vuex);

const store = new Vuex.Store({
     
    //  :     
    state: {
     
        name: 'hello Vuex',
        age:'18',
        role:2
    },

    //  :   state   
    mutations: {
     
        //     
        edit(state, payload){
     
            state.name = 'zhangsan'
            Vue.delete(payload,'age')  //        
            Vue.set(payload,'host','192.168.1.1')  //          ,     
            console.log(payload);
        }
    },
    //  :         ,   ,      computed  
    getters: {
     
        //     state          ,         
        nameInfo(state){
     
            return "  :"+state.name
        },
        //getters:       getters  
        fullInfo(state, getters){
     
            return getters.nameInfo+",  :"+state.age
        },
        //  :         ,   
        roleName(state){
     
            switch (state.role) {
     
                case 1:
                    return '   '
                case 2:
                    return '    '
                case 3:
                    return '  '
            }
        }
    },
    //    
    actions: {
     
        aEdit(context, payload){
     
            setTimeout(()=>{
     
                context.commit('edit',payload)
            },2000)
        }
    }


});

export default store

호출
App.vue

<template>
  <div id="app">
    <!--   -->
    name: {
     {
     $store.state.name}} <br>
    <!--    -->
    <button @click="add">vuex button test</button>
    <br/>
    <!--        -->
    -------------------------------------------------<br>
    getters:<br/>
    {
     {
     $store.getters.fullInfo}}<br>
    {
     {
     $store.getters.roleName}}<br>

    <!--      -->
    actions: <br>
    <button @click="edit">action button test</button>
    <br>
    -------------------------------------------------<br>
    <!--         -->
    mapGetters: <br>
    {
     {
     rname}} - {
     {
     uname}}
  </div>
</template>

<script>
 import {
     mapGetters,mapState,mapMutations} from 'vuex'
export default {
     
  name: 'App',
  components: {
     
  },
  methods: {
     
    add: function () {
     

      //   
      //this.$store.commit('edit',{"name":"lisi","age":"18"})
      //console.log(this.$store.state);
      //   
      /*this.$store.commit({
        type:'edit',
        payload: {
          "name": "hanmeimei",
          "age": 18
        }
      })*/
      //   
      this.modify({
     "test":'test'})
    },
    edit(){
     
      //    
      this.$store.dispatch('aEdit',{
     country: '  '})
    },
    //         edit      
    ...mapMutations({
     
      'modify': 'edit'
    })
  },
  computed: {
     

    //   
    //...mapGetters(['roleName'])

    //      
    ...mapGetters({
     
      'rname': 'roleName'
    }),
    ...mapState({
     
      'uname': 'name'
    })

  }
}
</script>

<style>
</style>