vuex

发表于 | 分类于 | 阅读次数

vuex

初步了解

第一步：安装vuex

npm install vuex --save-dev或npm install vuex -D

第二步：创建store.js文件

第三步：在mian.js文件中引入stroe模块

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
//1.引入store模块
import store from "./store"
new Vue({
    el: '#app',
    //2.将store模块应用到Vue中
    store,
    render: h => h(App)
});

第四步：完善store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from "vue"        //1.引入vue
import Vuex from "vuex"      //2.引入vuex
//3.使用vuex
Vue.use(Vuex);
//4.创建state状态对象，里面放静态数据
const state = {
    count:2
};
//5.创建mutations方法对象，里面放方法
const mutations = {
    increase(state){
        state.count++
    },
    decrease(state){
        state.count--
    }
};
//6.导出模块
//注意：是new Vuex.Store()，一开始写的new Vuex()
export default new Vuex.Store({
    state,
    mutations
})

第四步：App.vue中的代码

1
2
3
4
5
6
7
8
9
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Hello vuex</h1>
    <h2>{{$store.state.count}}</h2>
    <input type="button" value="增加" @click="$store.commit('increase')">
    <input type="button" value="减少" @click="$store.commit('decrease')">
  </div>
</template>

state状态对象

我们发现在模板里写<h2></h2>有点违背人家的意思，

要是写成<h2></h2>该多好，我们解决一下这个问题

App.vue中的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Hello vuex</h1>
    <h2>$store.state.count:{{$store.state.count}}</h2>
    <h2>计算属性：{{count}}</h2>
    <input type="button" value="增加" @click="$store.commit('increase')">
    <input type="button" value="减少" @click="$store.commit('decrease')">
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
    //计算属性是关键
  computed:{
      //这里的count属性在上面可以直接用了
      count(){
          //这里还是很累赘
          return this.$store.state.count + 1
      }
  }
}
</script>

我们需要在App.vue中引入mapState对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
//1.先引入mapState对象
//注意导入模块的方式，第一次没有加{}导致了错误
import {mapState} from "vuex"
export default {
  name: 'app',
  data () {
  },
  //2.在计算属性里用mapState
  computed:mapState({
    count(state){
      return state.count
    }
  })
}

computed可以有四种写法

1
2
3
4
5
6
//ES5的写法
computed:mapState({
    count:function (state){
        return state.count
    }
})
1
2
3
4
5
6
//ES6的写法
computed:mapState({
    count(state){
        return state.count
    }
})
1
2
3
4
//ES6箭头函数的写法(官方不建议用箭头函数)
computed:mapState({
    count:state => state.count
})
1
2
3
computed:mapState([
  "count"
]);  //注意这种方法用的最多，因为简单，但是不能进行计算

Mutations方法对象(mutation是同步的)

1
2
<input type="button" value="增加" @click="$store.commit('increase')"
<input type="button" value="减少" @click="$store.commit('decrease')"

注意上面的方法写的是不是很累赘，我们希望是以下的样子

1
2
<input type="button" value="增加" @click="increase">
<input type="button" value="减少" @click="decrease">

好了，我们来解决这个问题

first，先引入mapMutations对象

import {mapState,mapMutations} from "vuex"

second,在方法里面写

1
2
3
4
5
//注意mapMutations里是数组的形式
methods:mapMutations([
    "increase",
    "decrease"
])

Done,是不是很简单

把App.vue整体贴过来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Hello vuex</h1>
    <h2>计算属性：{{count}}</h2>
    <input type="button" value="增加" @click="increase">
    <input type="button" value="减少" @click="decrease">
  </div>
</template>
<script>
//1.先引入mapState对象,引入mapMutations对象
import {mapState,mapMutations} from "vuex"
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:mapState([
    "count"
  ]),
  //注意mapMutations里是数组的形式
  methods:mapMutations([
    "increase",
    "decrease"
  ])
}
</script>

mapGetters

用mapGetters和mapState差不多，但是mapGetters可以进行计算，而mapState要想计算，需要放到计算属性中

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Hello vuex</h1>
    <h2>$store.state.count:{{$store.state.count}}</h2>
    <h2>计算属性：{{count}}</h2>
    <input type="button" value="增加" @click="increase">
    <input type="button" value="减少" @click="decrease">
  </div>
</template>
<script>
//1.先引入mapGetters对象
import {mapState,mapMutations,mapGetters} from "vuex"
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  //2.在计算属性中使用mapGetters
  computed:mapGetters([
    //注意这里写的count需要在store.js中的getters中设置
    "count"
  ]),
  //注意mapMutations里是数组的形式
  methods:mapMutations([
    "increase",
    "decrease"
  ])
}
</script>

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
const state = {
    count:2
};
const mutations = {
    increase(state){
        state.count++
    },
    decrease(state){
        state.count--
    }
};
//3.定义getters对象
const getters = {
    //设置count
    count(state){
        //在这里可以对count进行计算，也可以不计算
        return state.count
    }
};
//注意：是new Vuex.Store()，一开始写的new Vuex()
export default new Vuex.Store({
    state,
    mutations,
    //4.别忘了把getter放到这里
    getters
})

mapActions

mapAction与mapMutations差不多，区别是mapActions是异步执行，mapMutations是同步执行

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Hello vuex</h1>
    <h2>$store.state.count:{{$store.state.count}}</h2>
    <h2>计算属性：{{count}}</h2>
    <!-- 2.方法加上,此例为plus和reduce -->
    <input type="button" value="增加" @click="plus">
    <input type="button" value="减少" @click="reduce">
  </div>
</template>
<script>
//1.先引入mapAction对象
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:mapGetters([
    "count"
  ]),
  //注意mapActions与mapMutations不同的是mapActions是异步的
  //3.在methods中写方法：plus和reduce，这里的方法名字对应store.js里面actions里的方法的名字
  methods:mapActions([
    "plus",
    "reduce"
  ])
}
</script>

Store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
const state = {
    count:2
};
//4.在mutations里面写方法的逻辑业务
const mutations = {
    plus(state){
        state.count++
    },
    reduce(state){
        state.count--
    }
};
//5.在actions里面调用
const actions = {
    //完整的写
    plus(context){
        context.commit("plus")
    },
    //解构的写法
    reduce({commit}){
        commit("reduce")
    }
};
const getters = {
    count(state){
        return state.count
    }
};
//注意：是new Vuex.Store()，一开始写的new Vuex()
export default new Vuex.Store({
    state,
    mutations,
    getters,
    //6.把action添加到这里
    actions
})

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid/Vue/vuex.html
欢迎转载，转载请注明文本链接

坚持原创技术分享，您的支持将鼓励我继续创作！