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>