vuex状态管理

1.什么是vuex

是一个专门为vue.js设计的集中式状态管理架构。
可以理解为在data中的属性需要共享给其他vue组件使用的属性。

2.vuex安装

在建好的脚手架项目中通过命令来下载vuex插件。
使用命令

npm n install vuex --save

需要注意的是要加上 –save，因为这个包需要在生产环境中使用。

3.vuex使用

首先创建一个js文件，在该js文件中引入vue、vuex，然后进行vuex的实例
代码如下

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

4.vuex属性及其使用方法

1.state状态对象的使用及赋值方式
1.1 通过computed赋值


1.2通过mapState的对象来赋值
首先引入mapstate

import {mapState} from 'vuex';

通过mapstate同样可以实现数据的赋值。
注意：在引入的时候必须将mapstate通过大括号括起来，否则会报错
同样，mapstate也可以直接赋值一个数组。

 computed:mapState(["count"])

这也是实际开发中常用的方式。
2.mutations修改状态值
首先声明一个方法，然后在方法中进行对应的业务逻辑操作，然后在将mutations暴露出去，在模板中就可以通过$store.commit(‘function’)来调用改变状态了。

const mutations={
    add(state){
        state.count++
    },
    reduce(state){
        state.count--
    }
}
export default new Vuex.Store({
    state,mutations
})

 <button @click="$store.commit('add')">+</button>
 <button @click="$store.commit('reduce')">-</button>

在mutations在带值

const mutations={
    add(state,n){
        state.count+=n
    },
    reduce(state,n){
        state.count-=n
    }
}

方法中通过第二个属性，将值传进去，然后调用时动态传值。

 <button @click="$store.commit('add',5)">+</button>
 <button @click="$store.commit('reduce',4)">-</button>

mutations传值的不同用法
首先在模板中通过map引入方法，然后就可以正常使用了。


3.getter计算属性的基本使用
首先需要对其进行声明，然后将其暴露出去，在模板中就可以使用了。

const getters={
   需要处理的业务逻辑
}

export default new Vuex.Store({
    state,mutations,getters
})

在模板中使用需要注意，由于getters也是计算属性，但是如果模板中出现俩个computed时，会出现覆盖现象，不能使用，因此需要使用到es6的展开运算符…

computed:{
    ...mapState(["count"]),
    count(){
      return this.$store.getters.count
    }
  },

getters属性的简单写法，和上面属性相同，通过map引入即可。

 computed:{
    ...mapState(["count"]),
    ...mapGetters(["count"])
  },

4.actions异步修改状态
用法去mutations类似，主要区别是actions是异步操作，而mutations是同步操作。

5.vuex模块化管理

将全部方法封装到一个模块中，然后将整个模块暴露出去，然后在模板中就可以使用了。

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

Vue.use(Vuex)

const state= {
    count:1
}
const mutations={
    add(state){
        state.count++
    },
    reduce(state){
        state.count--
    }
}
const getters={
    count:function(state){
        return state.count +=10;
    }
}
const actions={
    addAction(context){
        context.commit('add',5)
    },reduceAction(context){
        context.commit('reduce')
    }
}
const modelA = {
    state,mutations,getters,actions
}
export default new Vuex.Store({
    modules:{a:modelA}
})

在页面中使用

{{$store.state.a.count}}