<返回更多

VueX使用干货

2020-09-21    
加入收藏
VueX使用干货

 

vuex简介

Vuex 安装

  1. 命令行安装
npm install vuex --save
  1. 在src文件夹下创建 store文件夹,在该文件夹下创建 index.js文件,其中写入:
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);//2. 创建vuex对象
const store = new Vuex.Store({
  state: {},  mutations: {},  actions: {},  getters: {},  modules: {}})//3. 导出story对象
export default store;
  1. 在main.js文件中引入vuex对象
import Vue from 'vue'
import App from './App'
import router from './router'
//引入 vuex 的store对象
import store from "./store";
Vue.config.productionTip = falsenew Vue({  el: '#app',
  router,  store,  render: h => h(App)})

通过 mutation 修改vuex管理的状态

import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);//2. 创建vuex对象
const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态
    counter: 10
  },  mutations: {//定义方法用于修改vuex管理的状态
    increment(state){      state.counter++;    },    decrement(state){      state.counter--;    }  },  actions: {},  getters: {},  modules: {}})//3. 导出story对象
export default store;
<template>
<div id="app">
  <h3>{{$store.state.counter}}</h3>
  <!--操作vuex管理的状态-->
  <button @click="addition">+</button>
  <button @click="subtration">-</button>
  <hr>
  <hello-vuex/>
</div>
</template>
<script>
    import HelloVuex from "./components/HelloVuex";
    export default {
      name: 'App',
      components:{
        HelloVuex
      },
      methods:{
        addition(){
          //通过mutation修改被vuex管理的状态
          this.$store.commit('increment')
        },
        subtration(){
          //commit()传入的是在index.js中mutations中定义的方法名
          this.$store.commit('decrement')
        }
      }
    }
</script>

vuex Getters 的使用

import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);
//2. 创建vuex对象
const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    //这里定义的是state中变化后的内容
    more20stu(state){
      return state.students.filter(s => s.age > 20);
    }
  }
})
//3. 导出story对象
export default store;
<template>
<div id="app">
  <p>getters中定义的powerConter内容----</p>
  <h3>{{$store.getters.powerConter}}</h3>
  <p>通过getters 中的more20stu 获取state中age大于20的对象---</p>
    <!--通过getters拿到变化后的store中的内容-->
  	{{$store.getters.more20stu}}</div>
</template>
<script>
export default {
  name: 'App',
}
</script>

getters作为参数和传递参数

  1. 作为参数
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);
//2. 创建vuex对象
const store = new Vuex.Store({
  state: {
    counter: 10,
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    more20stu(state){
      return state.students.filter(s => s.age > 20);
    },
    //传入的第二个参数代表就是当前对象中的getters
    more20stuLenthg(state,getters){
      return getters.more20stu.length;
    }
  },
})
//3. 导出story对象
export default store;
<template>
<div id="app">
  <p>通过getters 中的more20stu 获取state中age大于20的对象---</p>
  {{$store.getters.more20stu}}  <p>getters 作为参数</p>
  <h3>{{$store.getters.more20stuLenthg}}</h3>
</div>
</template>
<script>
export default {
  name: 'App'
}
</script>
  1. 传递参数
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态
    counter: 10,
    students: [
      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ]
  },
  getters: {
    //获取年龄大于 age 的学生,这个Age不是写死的,而且别的地方传入进来的
    moreAgeStu(state) {
        //返回一个函数
      return function (age) {
        return state.students.filter(s => s.age > age);
      }
    }
  }
})
//3. 导出story对象
export default store;
<template>
<div id="app">
  <p>getters 传递参数----</p>
    <!--传入一个22给getters中定义的方法,这个方法返回一个函数,这个22就是函数的参数-->
  <p>{{$store.getters.moreAgeStu(22)}}</p>
</div>
</template>
<script>
export default {
  name: 'App'
}
</script>

mutainons 携带参数

mutations: {
    increment(state){        state.count++;    }}
increment: function(){
    this.$stote.commit('increment')
}
mutations: {
    // 第二个参数是外部传入的
    incrementCount(state,count){
        state.counter += count;
    }
},
<template>
<div id="app">
  <p>mutations 传递参数----</p>
  <h4>{{this.$store.state.counter}}</h4>
  <button @click="addCount(5)">+5</button>
  <button @click="addCount(10)">+10</button>
</div>
</template>
<script>
export default {
  name: 'App'
  methods:{
    addCount(count){
        //提交,并传入参数
      this.$store.commit('incrementCount',count);
    }
  }
}
</script>

mutitaions 传入多个参数

addStu(){
      const stu = {id: 5, name: 'alan', age:30};
      this.$store.commit('addSutdent',stu);
}

mutations提交风格

addCount(count){
    //普通的提交风格    //this.$store.commit('incrementCount',count);
    //特殊的提交风格    this.$store.commit({
        type: 'incrementCount',
        count    })},
mutations: {//定义方法用于修改vuex管理的状态
    incrementCount(state,payload){
      state.counter += payload.count;
    }
}

mutations响应规则

<template>
<div id="app">
  <p>store.state.info的内容是否是响应式的-------</p>
  <button @click="updateInfo">修改 info</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
export default {
  name: 'App',
  methods:{
      //修改info对象,并且是响应式的
    updateInfo(){
      this.$store.commit('updateInfo')
    }
  }
}
</script>
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态  
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {//定义方法用于修改vuex管理的状态
   //通过Vue.set(obj, key, value) 响应式的修改info的信息
    updateInfo(state){      Vue.set(state.info, 'addr', '重庆');
    }  }  })export default store;
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {//定义方法用于修改vuex管理的状态
    deleteInfo(state){      //删除属性该方式做不到响应式
      // delete state.info.name;
      Vue.delete(state.info, 'name');
    }  } })export default store;

mutation常量类型

export const INCREMENT = 'increment';
export const INCREMENTCOUNT = 'incrementCount';
export const DECREMENT = 'decrement';
export const ADDSTUDENT = 'addSutdent';
export const UPDATEINFO = 'updateInfo';
export const DELETEINFO = 'deleteInfo';
import Vue from "vue";
import Vuex from "vuex"// 引入这些常量import {  INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'Vue.use(Vuex);const store = new Vuex.Store({  state: { //定义被vuex管理的各个状态    counter: 10,    students: [      {id: 1, name: 'bob', age: 18},
      {id: 2, name: 'kobe', age: 22},
      {id: 3, name: 'xyx', age: 25},
      {id: 4, name: 'john', age: 17}
    ],
    info: {      name: 'xiaoyouxin',      age: 25,      height: 1.75    }  },  mutations: {     //修改方法名为 : [常量](){} 的方式
    [INCREMENT](state) {
      state.counter++;    },    [DECREMENT](state) {
      state.counter--;    },    [INCREMENTCOUNT](state,payload){
      state.counter += payload.count;    },    [ADDSTUDENT](state,stu){
      state.students.push(stu);    },    [UPDATEINFO](state){
      Vue.set(state.info, 'addr', '重庆');    },    [DELETEINFO](state){
      Vue.delete(state.info, 'name');    }  }})export default store;
<template>
<div id="app">
  <p>mutations 传递参数----</p>
  <h4>{{this.$store.state.counter}}</h4>
  <button @click="addCount(5)">+5</button>
  <button @click="addCount(10)">+10</button>
  <p>mutations 传递参数2----</p>
  <button @click="addStu">添加学生</button>
  {{$store.state.students}}  <p>store.state.info的内容是否是响应式的-------</p>
  <button @click="updateInfo">修改 info 添加属性</button>
  <h2>{{$store.state.info}}</h2>
  <button @click="deleteInfo">修改 info 删除属性</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
  import HelloVuex from "./components/HelloVuex";
    //引入常量
  import {
    INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
  } from "./store/mutations-types"
export default {
  name: 'App',
  methods:{
    addCount(count){
      this.$store.commit({
        type: INCREMENTCOUNT,  
        count
      })
    },
    addStu(){
      const stu = {id: 5, name: 'alan', age:30};
        //使用常量作为commit提交的参数
      this.$store.commit(ADDSTUDENT,stu);
    },
    updateInfo(){
        //使用常量作为commit提交的参数
      this.$store.commit(UPDATEINFO)
    },
    deleteInfo(){
      this.$store.commit(DELETEINFO);
    }
  }
}
</script>
<style>
</style>

Action 基本定义

import Vue from "vue";
import Vuex from "vuex"
import {
  INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'
Vue.use(Vuex);const store = new Vuex.Store({
  state: { //定义被vuex管理的各个状态
    info: {      name: 'xiaoyouxin',
      age: 25,
      height: 1.75
    }  },  mutations: {    [UPDATEINFO](state){      Vue.set(state.info, 'addr', '重庆');
    }  },  actions: {      //在actions中定义的函数中异步调用mutations中的方法
    aUpdateInfo(context){      setTimeout(() => {
        context.commit(UPDATEINFO)      },1000)
    }  }})export default store;
<template>
<div id="app">
  <button @click="updateInfo">修改 info 添加属性</button>
  <h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
  import {
    INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
  } from "./store/mutations-types"
export default {
  name: 'App',
  methods:{
    updateInfo(){
        //通过 dispatch的方式对state中的属性进行异步操作
      this.$store.dispatch('aUpdateInfo')
    }
  }
}
</script>

注意: action传递参数的方式mutitaions的方式一致

modules 的使用

项目结构

如果遇到文中代码格式被压缩的情况时,请复制代码到ide中查看

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>