vuex

单数据流

vuex安装

1,stage

State提供唯一的公共数据源，所有共享的数据都要统放到Store的State中进行存储。
//创建store数据源，提供唯一公共数据
const store = new Vuex.Store ({
state: { count: 0 }
组件访问State中数据的第一种方式:
this. $store. state.全局数据名称

组件访问State中数据的第二种方式: 
// 1.从vuex中按需导入mapState 函数
import { mapState } from 'vuex'
通过刚才导入的mapState函数,将当前组件需要的全局数据，映射为当前组件的computed计算属性:
// 2.将全局数据，映射为当前组件的计算属性
computed:{...mapState([ 'count'])

2.只能通过Mutation修改state里的值 ，Mutation函数不能执行异步操作

//定义Mutation
const store = new Vuex.Store ({
state: {
counL: 0
},
mutations: {
add(state) {
//变更状态
state . count++
}
})

//触发mutation
methods:{
handle1()//函数方法
 {
//触发mutations 的第一种方式
this.Sstore . commit('add' )
}
}

Mutation带参数

 this.$store.commit(是触发mutations的第一种方式， 触发mutations的第二种方式:

// 1.从vuex 中按需导入mapMutations 函数
import { mapMutations } from 'vuex'

// 2.将指定的mutations 函数，映射为当前组件的methods 函数
methods : {
...mapMutations(['add', ' addN' ])
btnHandler1() {this.sub( )},
btnHandler2() {this.subN()}//用this点出来
}

 异步用action函数

action函数带参数

 this.$store.dispatch是触发actions的第一-种方式， 触发actions的第二种方式:

 Getter用于对Store中的数据进行加工处理形成新的数据。
①Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
②Store 中数据发生变化，Getter 的数据也会跟着变化。

使用getters的第一种方式:
this. $store. getters.名称