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.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex)//准备actions--用于相应动作const actions = {
    }//准备mutations--用于操作数据const mutations = {
    }//准备state--用于存储数据const state = {
    }//创建storeexport 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'])           【数组写法（推荐）,对象写法同上】
},