VueX 使用

1.简介

就是用来多组件共享数据的实现用的

  

2.使用VueX

 因为使用的是vue2 所以下的是vuex3 若是vue3 必须下的是 vue4  

npm i vuex@3

3.搭建环境

1.创建 src/store/index.js

//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {}

//准备 mutations - 用于操作数据(state)
const mutations = {}


//准备 state - 用于存储数据
const state = {}

Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});

//暴露store
export default store;

2.main.js引入

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource
import vueResource from 'vue-resource'

//引入store
import store from './store/index'

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件
// import plugins from './plugins'
//使用插件
// Vue.use(plugins,1,3,2,5,6)

// const d = Vue.extend({}); 

// Vue.prototype.eventBus= new d();

//使用插件
Vue.use(vueResource)


//创建vm
new Vue({
    el: '#app',
    render: (h) => h(App),//放入构造出 App组件模板
    store,
    beforeCreate() {
        Vue.prototype.$bus = this; //安装全局事件总线
        // console.log(this);

    }
})

3.使用

store 下 建 index.js

//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {
    jia(context,value){
        console.log('actions中的jia被调用了',context ,value);
        context.commit('JIA',value);
        
    },
    jian(context,value){
        console.log('actions中的jian被调用了',context ,value);
        context.commit('JIAN',value);
        
    },
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了',context ,value);
        if(context.state.sum % 2){
            context.commit('JIA',value);
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了',context ,value);
        setTimeout(() => {
            context.commit('JIA',value);
        }, 1000);
    }
}

//准备 mutations - 用于操作数据(state)
const mutations = {
    JIA(state,value){
        console.log('mutations中的jia被调用了',state ,value);
        state.sum+=value;
    },
    JIAN(state,value){
        console.log('mutations中的jian被调用了',state ,value);
        state.sum-=value;
    }
}


//准备 state - 用于存储数据
const state = {
    sum:0,
}

Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    actions,
    mutations,
    state
});

//暴露store
export default store;

4.在组件中调用

<template>
  <div>
    <h2>当前求和为:{{ $store.state.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "CountComponent",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
        this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
        this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

4.getters的使用

相当于全局的计算属性

 5.mapActions mapGetter mapState mapMutations

 

6. 多组件共享数据

直接调用里面的数据就行,都是共享的

7.模块化加命名空间

<template>
  <div>
    <h2>当前求和为:{{ sum }}</h2>
    <h2>当前求和放大10倍为:{{ bigSum }}</h2>
    <h2>我在{{ school }} 学习 {{ subject }}</h2>
    <h2>Persion组件的总人数是:{{personList.length}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaOdd(n)">当前求和为奇数再加</button>
    <button @click="jiaWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "CountComponent",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    ...mapState('countAbout',["sum", "school", "subject"]), //同名就可以这样写
    ...mapState('personAbout',['personList']), //同名就可以这样写
    ...mapGetters('countAbout',["bigSum"]),
  },
  methods: {
    ...mapMutations('countAbout',["JIA", "JIAN"]),
    ...mapActions('countAbout',["jiaOdd", "jiaWait"]),
  }

};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>

 

<template>
  <div>
    <h1>人员列表</h1>
    <h1>Count组件求和为:{{sum}}</h1>
    <h3>列表中第一个人的名字是{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addOfNet">添加一个网络请求的人</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name:'PersonComponent',
  data() {
    return {
      name:''
    }
  },
  computed:{
    personList(){
      return this.$store.state.personAbout.personList;
    },
     sum(){
      return this.$store.state.countAbout.sum;
    },
    firstPersonName(){
      return this.$store.getters['personAbout/firstPersonName'];
    }
  },
  methods:{
      add(){
          const personObj = {id:nanoid(),name:this.name};
          console.log(this.$store);
          this.$store.commit('personAbout/ADD_PERSON',personObj)
          
      },
      
      addWang(){
          const personObj = {id:nanoid(),name:this.name};
          console.log(this.$store);
          this.$store.dispatch('personAbout/addPersonWang',personObj)
          
      },
       addOfNet(){
          this.$store.dispatch('personAbout/addPersonServer')
          
      }
  }
}
</script>

<style>

</style>
//该文件用于创建一个Vuex中最为核心的store

//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'

import countOptions from './count'
import persionOptions from './person'




Vue.use(Vuex)

//创建 store
const store = new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: persionOptions
    }
});

//暴露store
export default store;
//人员管理相关配置
import axios from "axios";
import { nanoid } from "nanoid";
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value);
            }
        },
        addPersonServer(context){
            axios.get('http://localhost:8080/atjmj/students/atjmj').then(res => {
                console.log(res.data);
                context.commit('ADD_PERSON', {id: nanoid(), name: res.data[0].name});
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了', state, value);
            state.personList.unshift(value);
        }
    },
    state: {

        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name;
        }
    }
}
//求和相关配置
export default {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            console.log('actions中的jiaOdd被调用了', context, value);
            if (context.state.sum % 2) {
                context.commit('JIA', value);
            }
        },
        jiaWait(context, value) {
            console.log('actions中的jiaWait被调用了', context, value);
            setTimeout(() => {
                context.commit('JIA', value);
            }, 1000);
        }
    },
    mutations: {

        JIA(state, value) {
            console.log('mutations中的jia被调用了', state, value);
            state.sum += value;
        },
        JIAN(state, value) {
            console.log('mutations中的jian被调用了', state, value);
            state.sum -= value;
        }
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    }
}
<template>
  <div class="appContainer">
  
  <CountComponent/>
  <PersonComponent/>

  </div>
</template>

<script>
import CountComponent from './components/CountComponent.vue';
import PersonComponent from './components/PersonComponent.vue';

export default {
  name: "App",

  components: {
    CountComponent,PersonComponent
  },
  methods: {},
};
</script>

<style scoped>
.appContainer {
  padding: 5px;
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  justify-content: center;
   align-items: center;  
}

</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值