vuex的学习

一、接收state的方式有三种

1.引入store直接 使用插值的方式 {{$store.state.count}}

{{$store.state.count}}

2.在computed中 声明一个方法 把$store.state.count return出来

countTwo(){
return this.$store.state.count;
},

3.通过mapState 在computed中进行引入 ...mapstate(["stateValue"])

...mapState(["count"]),

二、引入getters

1.引入store直接 直接在dom上绑定事件 @click="$store.commit('事件名称','参数')"

<button @click="addAction(10)">增加</button>

2.引入mapMutations 在methods中进行注册:...mapMutations(["add"]),如果有参数..只能在dom绑定方法时进行传递..

//eg: <input @click="add(10)"/>
...mapMutations(["add","reduce"]),

三、引入getters

使用mapGetters的方法类似于state的引入 两种引入方法

1.在computed中 声明方法 把this.$store.getters.count return出来

count(){
return this.$store.getters.count;
}

2.通过mapGetters 在computed中进行引入 ...mapGetters(["gettersValue"])

...mapGetters(["count"])

四、调用仓库中action的方法跟mutations的方法相同 也是两种

完整vue
<template>
<div>
<h1>
vueX的实践
</h1>
<input :type="change">
<hr>
<!-- state第一种 -->
{{$store.state.count}}
<!-- state第二种 -->
{{countTwo}}
<!-- state第三种 -->
{{count}}
<div>
<!-- mutation第一种 -->
<button @click="$store.commit('add',10)">增加</button>
<!-- mutation第二种 -->
<button @click="addAction(10)">增加</button>
<button @click="reduceAction">减少</button>
<!-- {{change}} -->
</div>
<button @click="toChange">改变type</button>
</div>
</template>
<script>
import store from '@/vuex/vuex'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
data() {
return {
msg: 'vueX的实践',
change:'date'
}
},
// 必须要写
store,
// 接收state的方式有三种
// 1.引入store直接 使用插值的方式 {{$store.state.count}}
// 2.在computed中 声明一个方法 把$store.state.count return出来
// 3.通过mapState 在computed中进行引入 ...mapstate(["stateValue"])
computed:{
// state第二种
countTwo(){
return this.$store.state.count;
},
// state第三种
...mapState(["count"]),

//引入getters
// 使用mapGetters的方法类似于state的引入 两种引入方法
// 1.在computed中 声明方法 把this.$store.getters.count return出来
// 2.通过mapGetters 在computed中进行引入 ...mapGetters(["gettersValue"])

// getters第一种获取方法
// count(){
// return this.$store.getters.count;
// }
// getters第二种获取方法
...mapGetters(["count"])
},
// 调用仓库中mutations的方法的两种
//1.引入store直接 直接在dom上绑定事件 @click="$store.commit('事件名称','参数')"
//2.引入mapMutations 在methods中进行注册:...mapMutations(["add"]),如果有参数..只能在dom绑定方法时进行传递..
//eg: <input @click="add(10)"/>

//调用仓库中action的方法跟mutations的方法相同 也是两种
methods:{
...mapMutations(["add","reduce"]),
...mapActions(['addAction',"reduceAction"]),
toChange(){
this.change = 'text'
}
},
created(){
console.log([...mapMutations])
},
}
</script>

<style scoped>
</style>

完整vuex.js：
import vue from "vue";
import vuex from 'vuex'
vue.use(vuex)

// state 是状态 或是变量 字面量形式
const state= {
count:10
}
//mutation 修改状态 也可以理解为同步方法 跟下面的action异步 执行顺序相反
const mutations = {
// 传参
add(state,n){
console.log(n)
state.count++
},
reduce(state){
state.count--
}
}
//getters 状态过滤 类似于computed 每改变一个state就进行一次过滤
const getters = {
// const:function(){} ==== var const =function(){return value}
//state参数是状态那个对象
count:function(state){
return state.count+=100
}
}

// action 处理异步方法 可以调用mutations里面的方法
const actions = {
// 先执行
addAction(context){
context.commit('add',10)
},
// 后执行 因为是异步
reduceAction(context){
context.commit('reduce')
}
}

// 暴露出去
export default new vuex.Store({
state,
mutations,
getters,
actions
})

vuex存值：
state:{
value:''
}

mutations:{
changeValue(state,newVal){
state.value=newVal
}
}

//存

this.$store.commit('changeValue',1)

//取

console.log(this.$store.state.value)//1