• vue 关于vuex


    <!-- vuex 配置js store.js -->
    1.引入vue和vuex

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex);
    const store= new Vuex.Store({
    <!-- 用来放数据 -->
      state:{
        user:{
          name:'768028030@qq.com',
          age:'24',
          phone:'13370123965'
        },
        type:{
          status:true,
          swichText:"隐藏"
        },

        text:"这个样的数据"
      },

      //在组件中获取state数据的最简单方法是通过 计算属性直接返回 computed: { count () { return this.$store.state.text} }
      //一个组件中用到多个state数据是 可以使用 mapState辅助函数 (记得先import哦!  酱紫:import { mapState } from 'vuex')

    <!-- -->
      getters: {
        name: ({user}) => user.name,
        age: ({user}) => user.age,
        phone:({user})=>user.phone,
        type:({type})=>type,
        mytext:(state)=>state.text,

      },
    <!-- 类似事件 用来更改state的数据 重点是需要用actions提交哦 -->
      mutations:{
        increment ({user}) {
          // 变更状态
          user.age++
        },
        setType ({type}){
          if(type.status==true){
            type.status=false;
            type.swichText="显示"
          }else{
            type.status=true;
            type.swichText="隐藏"
          }
        }
      },
    <!-- 用来提交mutations -->
      actions:{
        increment ({ commit }) {
    <!-- 类似事件注册 -->
          commit('increment')
        },
        setType ({ commit }) {
          commit('setType')
        }
      }
    })

    export default store;


    <!--使用数据 hello.vue-->

    <template>
      <div class="hello">
        <img src="../assets/why.jpg"/>
        <p>{{$store.getters.name}}</p>
        <p>{{$store.getters.age}}</p>
        <p @click="increment">点击加1</p>
        <p>{{$store.getters.type.status}}</p>
        <p @click="setType">{{$store.getters.type.swichText}}</p>
      </div>
    </template>

    <script>
      import {mapActions} from 'vuex'
      export default {
        name: 'hello',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        },
        created (){
          this.openNew();
        },
        methods: {
          openNew(){
            alert(1)
          },
          ...mapActions([
            'increment',
            'setType'
          ])
        }
      }
    </script>


      

    此博客文章多为本姑娘学习笔记!有不对的地方还望指正!!!么么哒
  • 相关阅读:
    When root grant all privileges to new user in mysql and report error 'Root is not allowed to grant privileges on a MySQL database'
    C++ mysql print all rows all columns data in Ubuntu
    Redis 在项目中使用Redis
    Java应用1文件流的读和写
    Java应用2POI之操作Excel
    腾讯云发布高性能播放器SDK:提供腾讯视频同款内核,启播时长低至100ms
    在有限高度容器内使 动态输入框自动滚动到视野内
    小程序在开发者工具、真机测试时好好的,体验版 页面空白无法通过审核
    elementui form 表单字段报错错误原因分析
    docker部署rocketmq
  • 原文地址:https://www.cnblogs.com/whyue/p/6549369.html
Copyright © 2020-2023  润新知