快速入门vuex！！

目录

一.vuex的核心组成

二.vuex版本问题及store.js的使用

1.1.使用vue的步骤

 三.vuex中的设置及获取变量值

四.vue操作中异步和同步操作

五.vuex后台交互

---

一.vuex的核心组成

 核心组件：

state.js存储变量

Gettere.js获取变量值

mutations.js改变变量值（同步）

actions.js改变变量值（异步）

二.vuex版本问题及store.js的使用

1.1.使用vue的步骤

1.加载依赖：npm install vuex -s 下载vue最新版本的依赖

 

2.导入vue的核心4个组件，然后通过index.js加载进来

        index.js

        state.js

        actions.js

        mutations.js

        getters.js

import Vue from 'vue'

import Vuex from 'vuex'

import state from './state'

import getters from './getters'

import actions from './actions'

import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({

  state,

  getters,

  actions,

  mutations

 })

 export default store

 

3.将vuex对应的index.js 挂载到main.js 中的vue实例中

 

4.测试vuex的存储变量的功能

注意：错误示范

创建一个VuexPage1：

代码：

<template>
  <div>
    <p>欢迎来到{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'VuexPage1',
  data () {
    return {

    }
  },
  computed: {
    msg () {
      return this.$store.state.reaName
    }
  }
}
</script>

<style>
</style>

 结果会有错误：

 

原因：vue的版本问题

 npm i -S vuex@3.6.2

 三.vuex中的设置及获取变量值

 

mutations.js:

import state from "./state";

export default{
  setResName:(state,payload)=>{
    //state对象就对应了state.js中的对象
    //payload载荷对应的传递的json对象参数{name:zs,age:12}
    state.resName = payload.resName;

  }
}

创建两个VuexPage1和VuexPage2进行观察：

VuexPage1：

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
  </div>
</template>

<script>
export default {
  name: 'VuexPage1',
  data () {
    return {

    }
  },
  methods: {
    buy () {
      console.log(this.$store)
      // 通过该方法会调用mutation.js文件中定义好的方法
      this.$store.commit('setResName', {
        resName: 'KFC'
      })
    }
  },
  computed: {
    msg () {
      // console.log(this.$store)
      // return this.$store.state.resName
      // 通过getters.js文件获取state.js中的定义的变量值
      return this.$store.getters.setResName
    }
  }
}
</script>

<style>
</style>

VuexPage2：

<template>
  <div>
    <p>页面2：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
  </div>
</template>

<script>
export default {
  name: 'VuexPage2',
  data () {
    return {

    }
  },

  computed: {
    msg () {
      // console.log(this.$store)
      // return this.$store.state.resName
      // 通过getters.js文件获取state.js中的定义的变量值
      return this.$store.getters.setResName
    }
  }
}
</script>

<style>
</style>

效果：点击盘它按钮两个界面都会出现欢迎来到KFC

 

 

四.vue操作中异步和同步操作

actions.js

export default {
  setResNameAsync: (context, payload) => {
    //异步修改值
    //context指的是vuex的上下文
    //此代码在6秒后执行
    setTimeout(function() {
      context.commit('setResName', payload);
    }, 6000);


  }
}

VuexPage1：

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终店长</button>
  </div>
</template>

<script>
export default {
  name: 'VuexPage1',
  data () {
    return {

    }
  },
  methods: {
    buy () {
      console.log(this.$store)
      // 通过该方法会调用mutation.js文件中定义好的方法
      this.$store.commit('setResName', {
        resName: 'KFC'
      })
    },
    buyAsync () {
      this.$store.dispath('setResNameAsync', {
        resName: '麦当劳'
      })
    }
  },
  computed: {
    msg () {
      // console.log(this.$store)
      // return this.$store.state.resName
      // 通过getters.js文件获取state.js中的定义的变量值
      return this.$store.getters.setResName
    }
  }
}
</script>

<style>
</style>

效果：

 

 

五.vuex后台交互

actions.js

export default {
  setResNameAsync: (context, payload) => {
    //异步修改值
    //context指的是vuex的上下文
    //此代码在6秒后执行
    setTimeout(function() {
      context.commit('setResName', payload);
    }, 6000);
    let _this = payload._this;
    let url = _this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url, {}).then(r => {
      console.log(r);
    }).catch(e => {

    });

  }
}

VuexPage1：

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终店长</button>
  </div>
</template>

<script>
export default {
  name: 'VuexPage1',
  data () {
    return {

    }
  },
  methods: {
    buy () {
      console.log(this.$store)
      // 通过该方法会调用mutation.js文件中定义好的方法
      this.$store.commit('setResName', {
        resName: 'KFC'
      })
    },
    buyAsync () {
      this.$store.dispath('setResNameAsync', {
        resName: '麦当劳',
        _this: this
      })
    }
  },
  computed: {
    msg () {
      // console.log(this.$store)
      // return this.$store.state.resName
      // 通过getters.js文件获取state.js中的定义的变量值
      return this.$store.getters.setResName
    }
  }
}
</script>

<style>
</style>