vue组件-Vuex

零.什么是Vuex

• 专门在 Vue中集中式状态（数据）管理Vue的插件
• 多个组件可以共享并且操作Vuex里面的数据

一.如何使用Vuex

1. 安装vuex：

npm i vuex

2. 引入Vuex

import Vuex  from ‘vuex’

3. 使用插件

• 这个时候，vm身上就有了store配置项【注意】

Vue.use(Vuex)

4. 创建store文件

配置action，mutations，store

//准备actions--用于相应动作
const actions = {
    jia(context,value){
        context.commit('JIA',value)
    }
}
//准备mutations--用于操作数据
const mutations = {
    JIA(state,value){
         state.sum+=value
    }
}
//准备state--用于存储数据
const state = {
     sum:0
}
//可以配置getters--相当于computed
const getters={
    sum_9(state){
        return state.sum*9
    }
}
//创建store
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

5.引入store配置

在mian.js中的vm创建store配置项

import store from './store'
	new Vue({
		el:'#root',
		render:h=>h(App),
		store:store
})

• 注意事项：由于在vue-cli中，会自动提前import语句，所以我们在引入store的时候，就并没有执行Vue.use(Vuex),这个就导致我们再store中使用Vuex就没有用，所以我们一般在store文件中引入和使用vuex

创建store
创建一个文件：src/store/index.js
   
   import Vue from "vue";
   import Vuex from "vuex";
   Vue.use(Vuex)

   //准备actions--用于相应动作
   const actions = {}
   //准备mutations--用于操作数据
   const mutations = {}
   //准备state--用于存储数据
   const state = {}
   //创建store
   export default  new Vuex.Store({
       actions,
       mutations,
       state
   })

6.基本使用

1.组件中读取vuex的数据

this.$store.state.sum

2.组件中修改vuex数据

this.$store.diapatch("方法名",数据)   【完整先actions】
this.$store.commit("方法名",数据)     【直接mutation】

3.组件中使用：

this.$store.getters.sum_9

二.mapState等4个map用法

1.为什么要用map方法

• 因为在平常使用store里面的数据的时候，要写很长一串this.$store.state.sum
• 所以我们可以先配置一些东西，简化我们的书写

2.mapState：

• 用于帮助我们映射state中的数据，并且帮我们自动生成计算属性

computed:{
            ...mapState(['sum','a','b'])           【数组写法（推荐）】
            ...mapState({sum:'sum',a:'a',b:'b'})   【对象写法】
        },

2.mapGetters:

• 用于帮助我们映射getters中的数据，并且帮我们自动生成计算属性

 computed:{
        ...mapGetters(['sum_9'])           【数组写法（推荐）,对象写法同上】
    },

【**这里注意传参：必须在使用的时候传参，比如<button @click="cheng(2)">点我乘2</button>】**

3.mapActions:

• 用于帮助我们映射actions中的函数，并且帮我们自动$store.dispatch(xxx)函数

methods:{
        ...mapActions(['cheng'])           【数组写法（推荐）,对象写法同上】
    },

4.mapMutations:

• 用于帮助我们映射mutations中的函数，并且帮我们自动$store.commit(xxx)函数

methods:{
    ...mapMutations(['JIA'])           【数组写法（推荐）,对象写法同上】
},