zoukankan      html  css  js  c++  java
  • 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>


      

    此博客文章多为本姑娘学习笔记!有不对的地方还望指正!!!么么哒
  • 相关阅读:
    例6-5
    例7-1+7-2
    例6-2+6-3
    习题二(3)
    习题二(1)
    课堂作业4
    课堂作业3
    实验三 利用循环计算n个圆柱体体积。
    实验三 编写求圆面积的程序,要求当输入的半径r<=0时,提示输入错误,要求r为浮点型,r的数值是动态的由键盘输入;
    心得3
  • 原文地址:https://www.cnblogs.com/whyue/p/6549369.html
Copyright © 2011-2022 走看看