vuex核心概念
// vuex中一共有五个状态 State Getter Mutation Action Module
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
// 里面定义方法，操作state方发
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {
}
})
State
提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data
在vuex中state中定义数据，可以在任何组件中进行调用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据，相当于data
state: {
name:"张三",
age:12,
count:0
},
})
调用方式
- 方式一
在标签中直接 调用如:
<p>{{$store.state.name}}</p>
<p>{{$store.state.age}}</p>
- 方式二
// this.$store.state.全局数据名称如
<script>
export default{
data(){
return{
name:'',
age:this.$store.state.age
}
},
methods:{
giveName(){
thsi.name = this.$store.state.name
}
}
}
</script>
- 方式三
从vuex中按需导入mapstate函数如:
<script>
import { mapState } from "vuex";
export default{
data(){
return{
}
},
computed: {
...mapState([name, age])
}
}
</script>
Mutation
// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: '张三',
age: 12,
count: 0
},
getters: {
},
// 里面定义方法，操作state方发
mutations: {
addCount(state, num) {
state.count =+ state.count+num
},
reduceCount(state) {
state.count--
}
},
// 操作异步操作mutation
actions: {
},
modules: {
}
})
- 组件的使用方法
// 方法一
<script>
export default{
data(){
return{
}
},
methods:{
onAddCount(){
this.$store.commit('addCount', 4)
},
onReduce () {
this.$store.commit('reduceCount')
}
}
}
</script>
// 方法二
<script>
export default{
data(){
return{
}
},
methods:{
...mapMutations(['addCount','reduceCount'])
onAddCount(){
this.addCount(4)
},
onReduce () {
this.reduceCount()
}
}
}
</script>
Action
Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: '张三',
age: 12,
count: 0
},
getters: {
},
// 里面定义方法，操作state方发
mutations: {
addCount(state, num) {
state.count =+ state.count+num
},
reduceCount(state) {
state.count--
}
},
// 操作异步操作mutation
actions: {
asyncAdd (context) {
setTimeout(() => {
context.commit('reduceCount')
}, 1000);
}
},
modules: {
}
})
/*
* 调用方式
*/
// 方式一
this.$store.dispatch("asynAdd")
// 方式二
methods:{
...mapActions(['asyncAdd '])
onReduce () {
this.asyncAdd()
}
}
Module
mutation主要用于分割
在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
// 里面定义方法，操作state方发
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {
userinfo: {
state: {
name: '李四'
},
getters: {},
modules: {}
},
header: {
state: {},
getters: {},
modules: {}
},
}
})
- 获取方式
this.$store.state.userinfo.name
getter
- getter是对于Store中的数据进行加工处理形成新的数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 2
},
getters: {
powerCounter(state) {
return state.counter * state.counter
},
},
// 里面定义方法，操作state方发
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {}
})
- 调用方式
// 方法一
<p>{{$store.getters.powerCounter()}}</p>
// 方法二
<script>
import { mapGetters } from "vuex";
export default{
data(){
return{
}
},
computed: {
...mapGetters(['powerCounter'])
},
methods:{
onAddCount(){
this.powerCounter()
},
}
}
</script>