【无标题】

vuex的整理

vuex的组成

vuex一共包含5个模块，分别是state，getter ，mutation，action， module

• state是vuex的共享状态（即变量类似vue的data）
• getter就是vue的派生状态类似于computed
• mutation是vuex同步更新store里面state的方法（vuex中唯一可更改store里面的state的数据，只有通过提交mutation才能修改状态）
• action跟mutation类似，只有mutation提交之后方可修改store的状态，所以action也是通过提交mutation修改store之后的状态，跟mutation不同的是action是异步的
• module就是模块可以把每一个store分成独立的小模块，每个小模块也有对应的5个属性

vuex的使用

vuex的创建

1. 创建vuex

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

2. 在main.js中引入

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  data(){
	  return{
	  }
  },
  store,
  components: { App },
  template: '<App/>'
})

vuex的核心

store

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
state（存储数据的容器）

export default {
	manName: '张三'
}

我们可以通过这中方法获取state的值：
方案一：当这个页面只出现一次可以达到（不建议）

<template>
    <div>男人的名字是：{{this.$store.state.manName}}</div>
</template>

<script>
export default {

}
</script>

方案二: 当有很多页面需要这个参数时，用下面方法（一种更简单方法，推荐使用）
通过计算属性方法获取

<template>
    <div>
        男人是：{{getManName}}
    </div>
</template>

<script>
export default {
    computed: {
        getManName:function() {
            return this.$store.state.manName
        }
    }
}
</script>

此外我们还可以通过mapState来映射

<template>
    <div>
        男人是：{{manName}}
    </div>
</template>
<script>
//导入mapState方法，同时导入其他方法的，方便等下使用
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
export default {
    //映射manName,this.manName就是this.$store.state.manName,相当于把state中的manName变为组件的变量
    computed: mapState(["manName"]) 
}
</script>

或者使用下面的方式自定义一个不一样的变量名,还可以使用…来展开多个变量。

computed: {
//映射number和name,this.number就是this.$store.state.count, this.name就是this.$store.state.nickname
  ...mapState({
      name: state => state.manName
    })
 }

mutation（设置state的数据）
之前说过，只有通过mutation才能更改state中变量的值。因此，可以在mutations.js中添加修改state中manName的方法用于实现修改名字，如下

export default {
	// type(事件类型)： 其值为manName 
	// payload官方说是一种载荷，大部分时候是一个对象（即可以写成对象的形式传参）
	setManName: function(state,payload){
		state.manName = payload.newManName
	}
}

如果要实现统计点击次数，就是当每次点击的时候调用mutation中的setManName方法。通过"this.$store.commit("setManName")"可以调用setManName方法实现manName的改变，如下this.$store.commit(type,payload)

<template>
    <div>
        <button @click="setManName()">点击总数是：{{manName}}</button>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    //映射manName ,this.manName 就是this.$store.state.manName ,相当于把state中的manName 变为组件的变量
    computed: mapState(["manName "]),
    methods: {
        setManName() { 
        	1. 把载荷和type分开
            this.$store.commit("setManName", {
            	newManName: '李四'
            })
            2. 把载荷和type写在一起
			this.$store.commit({
				type: 'setManName',
				newManName: '李四'
			})	
        }
    }
}
</script>

同样的，通过mapMutation来映射也可以使用setManName方法

methods: {
		//映射addCount方法,this.addCount就等于this.$store.commit("setManName")
        ...mapMutations(["setManName"])  
    }

getters
可以理解为store的计算属性，对state在输出前做数据处理（点击切换名字）

const getters = {
    getManName(state, getters) {  //传入state对象
        let result = getters.newManName
        return result
    }
}

export default getters

点击切换名字

 <button>点击更改名字{{getManName}}</button>

同样可以通过展开映射

 computed: {
 		//映射count,this.count就是this.$store.state.count,相当于把state中的count变为组件的变量
        ...mapState(["manName"]),  
        ...mapGetters(["getManName"]),  //映射getManName
    },

actions
实现名字的自然更改，当然，action也是通过调用mutation来实现getManName增加的。两者的主要区别是actions可以实现异步操作。在actions.js添加

export default {
    setManName({commit}) {
        commit('getManName')
    }
}

同样的，也可以通过映射来使用addCountAction方法

methods: {
		 //映射setManName方法,this.addCount就等于this.$store.commit("setManName")
        ...mapMutations(["setManName"]), 
        ...mapActions(["setManName"])  //映射setManName方法
    }

https://www.jianshu.com/p/958656738334