单数据流
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.名称