vuex 配置和state、mutations应用

vuex

  1、安装
    cnpm install vuex --save

  2、使用

    创建store文件夹,创建js文件
    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

    export default new Vuex.Store({
      
      存储数据
      state:{

        (1)获取:在其他组件中,$store.state.键名/this.$store.state.键名
        
        (2)在组件中尽量配合计算属性使用,通过mutations内的方法调用,因为计算属性可以设置set和get方法,或使用mapState方法来代替
            
            其中使用mapState来映射代替set和get方法:
            
              (1)在使用的组件中import {mapState} from 'vuex'
              (2)组件中三种方式使用mapState映射,模板内直接键名调用
                1、computed:mapState(['键名1',...])   //相当于this.$store.state.键名;若使用双向绑定,需要设置监听事件配合e.target.value
                2、computed:mapState({ 键名:'state中的键名',键名:(state)=>{return state.键名}},...,还可以设置方法来修改)
                3、computed:{
                  //解构
                    ...mapState({
                      和2中一样的形式/或1
                    })
                }

      
      方法
      mutations:{
      	用于改变state中的数据		
		
        (1)创建:function(state,形参);在组件中,this.$store.commit('方法名',参数)
			其中:参数只能有一个
			
		(2)调用:在其他组件的函数中,this.$store.commit('方法名')
		
		(3)调用2:this.$store.commit({
			          type:'方法名',
			          amount:参数
			        })
			        
		(4)调用3:使用mapMutations辅助
			import {mapMutations} from 'vuex'
			methods:{
			...mapMutations(['xx'])		
		}
      }
    })

  3、在main.js中

      import store from './store'
      添加到vue实例化对象中,与router同级
      store

代码示例:
vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//仓库对象,存放多组件共用数据
export default new Vuex.Store({
  //data
  state:{
      num:0,
      age:17,
      sex:'male'
  },
  //methods,尽量在这里处理state中的状态
  mutations:{
    //这里的方法,state形参获取state中的数据
    add:function(state)
     {
       state.num++;
     },
     setNum:function(state,val)
     {
       state.num=val;
     }
  },
  //异步方法(如ajax)
  actions:{

  },
  //模块
  modules:{

  }
})

组件:

<template>
  <div>
   <!-- <h1>数量:{{msg}}</h1>
    <button @click='adds'>点击</button>
    <input type="text" v-model='num'>
    {{num}} -->
<!--
    <h1>{{num}}</h1>
    <input type="text" :value='num' @input='change'> -->

    <h1>{{sex}}</h1>
    <h1>{{num}}</h1>


  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default{
    name:'A',
    data()
    {
      return{
         count:0
      }
    },
    //set和get方式
    // computed:{
    //   // msg:function()
    //   // {
    //   //   return this.$store.state.num;
    //   // },
    //   // num:{
    //   //   get:function(){
    //   //     return this.$store.state.num;
    //   //   },
    //   //   set:function(value){
    //   //     this.$store.commit('setNum',value);
    //   //   }
    //   // }
    // },

    //数组映射方式
    // computed: mapState(['num','age','sex']),

    //对象映射方式
    // computed:mapState({
    //   num:'num',
    //   sex:(state)=>{return state.sex}
    // }),

    computed:{
      ...mapState({
        num:'num',
        sex:(state)=>{return state.sex}，
        setNum:xxx使用mutations内的方法修改
      })
    },
    methods:{
      adds()
      {
        this.$store.commit('add');
      },
      change(event)
      {
        this.$store.commit('setNum',event.target.value)
      }
    }
  }
</script>

<style>
</style>