• <vuex第一弹>vuex之state和Mutation(前端网备份)


    state为访问状态对象
    Mutation为触发状态各人理解,这里做的是一些全局改变样式这种类似的操作
    通过vue入口文件main.js里面开始
    main.js
    import store from './store/index'
    new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
    })
    写vuex的层
    store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutation'
    Vue.use(Vuex);
    export default new Vuex.Store({
        state,
        mutations
    })

    store/state.js

    const state = {
        count : 44,
        bColor:"orange"
    }
    export default  state;

    store/mutation.js

    const mutations = {
        jian(state){
            state.count--
        },
        jia(state,n){
            state.count+=n.a
        },
        changeColor(state){
            if(state.bColor == "orange"){
                state.bColor = "blue"
            }else{
                state.bColor = "orange"
            }
        }
    }
    export default mutations

    调用vuex的组件层

    <template>
      <div class="wrapper">
        我是list1_son
        {{$store.state.count}}-{{count}}
         <button @click="$store.commit('jia',num)">+</button>  
         <!-- <button @click="jia(num)">+</button>  -->
         <button @click="changeColor(bColor)">改变背景颜色</button>
         <div :style="{background:bColor}" class="text_bc">123</div>
         <button @click="jia(num)">+</button> 
        <button @click="jian">-</button> 
      </div>
    </template>
    
    <script>
    import { mapState, mapMutations } from "vuex";
    export default {
      components: {},
      props: {},
      data() {
        return {
            num:{a:2},
        };
      },
      watch: {},
      //几种写法形式
      //   computed:{
      //       count(){
      //           return this.$store.state.count - 1
      //       }
      //   },
    //   computed: mapState({
    //     count: state => state.count + this.num
    //   }),
    //mapState简写在computed里;mapMutations简写在methods里
     computed: {
         ...mapState({
            count: state => state.count + 2,
            bColor: state => state.bColor
        }),
    
     },
      methods: {
        //不简写的方法,直接在这里定义方法,在里面去传参
        //   jia(){
        //       let num = this.num;
        //       this.$store.commit('jia',num) 
        //   },
        //简写的方法必须在上面的@click="jia(num)"动态传参,目前只实现了这种形式
          ...mapMutations({
                jian: 'jian',
                jia:'jia',
                changeColor:'changeColor'
            }),
      },
      created() {
      },
      mounted() {
        console.log(this.$store.state.count);
      }
    };
    </script>
    <style  scoped>
    .wrapper {
      color: grey;
    }
    .text_bc{
        background: orange;
        100px;
        height:100px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center
    }
    </style>
  • 相关阅读:
    【第五周读书笔记】我是一只IT小小鸟
    【第三周读书笔记】浅谈node.js中的异步回调和用jsxlsx操作Excel表格
    【第四周读书笔记】读构建之法第11到第16章
    【第一次个人作业】一条咸鱼的词频统计
    win10连接无线网,开启移动热点,手机连接它手机一直显示获取ip地址中。
    每月一次,免费领取小米云服务会员
    Spring Day 1
    oracle闪回查询和闪回数据库
    oracle异库同表名的两个数据库中数据合并或数据表结构的修改
    oracle使用SQL来生成SQL
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/10997249.html
Copyright © 2020-2023  润新知