vue 关于vuex

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,

},

　　mutations:{
　　　　increment ({user}) {
　　　　　　// 变更状态
　　　　　　user.age++
　　　　},
　　　　setType ({type}){
　　　　　　if(type.status==true){
　　　　　　　　type.status=false;
　　　　　　　　type.swichText="显示"
　　　　　　}else{
　　　　　　　　type.status=true;
　　　　　　　　type.swichText="隐藏"
　　　　　　}
　　　　}
　　},

　　actions:{
　　　　increment ({ commit }) {

　　　　　　commit('increment')
　　　　},
　　　　setType ({ commit }) {
　　　　　　commit('setType')
　　　　}
　　}
})

export default store;

<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>

巴特西

vue 关于vuex

最新文章

热门文章