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>


  

posted @ 2017-03-14 16:52  月月木有小情绪  阅读(248)  评论(0编辑  收藏  举报