Blog
HiuZing
2022-04-27
目录

Vue-Vuex介绍

# Vuex介绍

# 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

# 何时使用？

多个组件需要共享数据时

# Vuex的基本使用

//安装
npm install vuex --save

//导入
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
1
2
3
4
5
6
7
8
9
10

# 创建store对象

const store = new Vuex.Store({
    // state中存放的就是全局共享数据 
    state:{     
    count: 0 
    } 
})
1
2
3
4
5
6

# 挂载store对象

new Vue({ 
    el: '#app', 
    render: h=>h(app)m 
    router, 
    //将创建的共享数据对象,挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store 
})
1
2
3
4
5
6
7
8

# 具体实现

  1. 创建store文件夹，在文件夹内创建index.js文件
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
   
//创建并暴露store
export default new Vuex.Store({
	actions,
    mutations,
    state
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  1. 在main.js中创建vm时传入store配置项
//引入store
import store from './store'
......
   
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})
1
2
3
4
5
6
7
8
9
10

# 基本使用

初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
      jia(context,value){
         // console.log('actions中的jia被调用了',miniStore,value)
         context.commit('JIA',value)
      },
   }
   
   const mutations = {
       //执行加
      JIA(state,value){
         // console.log('mutations中的JIA被调用了',state,value)
         state.sum += value
      }
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
      actions,
      mutations,
      state,
   })
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

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：**$store.dispatch('action中的方法名',数据)**或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

例子：

配置store

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    jia(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIA', value)
    },
    jian(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
            setTimeout(() => {
                context.commit('JIA', value)
        },500)
    }
}
// 准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutataion中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutataion中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备state——用于存储数据
const state = {
    sum: 0 //当前的和
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
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
43
44
45
46
47
48
49
50
51
52
53

在组件中

组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：**$store.dispatch('action中的方法名',数据)**或 $store.commit('mutations中的方法名',数据)

<template>
  <div>
    
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
  export default {
    name: "Count",
    data() {
      return {
        n:1,//用户选择的数字
      }
    },
    methods: {
      increment(){
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      },
      incrementOdd(){
          this.$store.dispatch('jiaOdd',this.n)
      },
      incrementWait(){
          this.$store.dispatch('jiaWait',this.n)
      }
    },
  };
</script>
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

# Getters的使用

当state的数据需要加工后再使用，可以使用getters

  • Getters用于对Store中的数据进行加工处理形成新的数据，类似于Vue中的计算属性
  • Store中数据发生变化，Getters的数据也会跟随变化

在store中加入getters的配置

const getters = {
	bigSum(state){
		return state.sum * 10
      }
   }
   
   //创建并暴露store
   export default new Vuex.Store({
      ......
      getters
   })
1
2
3
4
5
6
7
8
9
10
11

组件中读取数据：$store.getters.bigSum

例子：

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    jia(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIA', value)
    },
    jian(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
            setTimeout(() => {
                context.commit('JIA', value)
        },500)
    }
}
// 准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutataion中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutataion中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备state——用于存储数据
const state = {
    sum: 0 //当前的和
}

// 准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在组件中读取数据

<template>
  <div>
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <h3>当前求和放大十倍为：{{$store.getters.bigSum}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
  export default {
    name: "Count",
    data() {
      return {
        n:1,//用户选择的数字
      }
    },
    methods: {
      increment(){
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      },
      incrementOdd(){
          this.$store.dispatch('jiaOdd',this.n)
      },
      incrementWait(){
          this.$store.dispatch('jiaWait',this.n)
      }
    },
  };
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

# 四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
  computed: {    
      //借助mapState生成计算属性：sum、school、subject（对象写法）     
      ...mapState({sum:'sum',school:'school',subject:'subject'}),           
      //借助mapState生成计算属性：sum、school、subject（数组写法）    
      ...mapState(['sum','school','subject']),  
  },
1
2
3
4
5
6
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
  computed: {    
      //借助mapGetters生成计算属性：bigSum（对象写法）    
      ...mapGetters({bigSum:'bigSum'}),      
      //借助mapGetters生成计算属性：bigSum（数组写法）    
      ...mapGetters(['bigSum'])  
  },
1
2
3
4
5
6
  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含**$store.dispatch(xxx)**的函数
methods:{    
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）    
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})      
    //靠mapActions生成：incrementOdd、incrementWait（数组形式）    
    ...mapActions(['jiaOdd','jiaWait'])  
}
1
2
3
4
5
6
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含**$store.commit(xxx)**的函数
methods:{   
    //靠mapActions生成：increment、decrement（对象形式）    
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),       
    //靠mapMutations生成：JIA、JIAN（对象形式）    
    ...mapMutations(['JIA','JIAN']),  
}
1
2
3
4
5
6

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

例子：

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大十倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
    name: "Count",
    data() {
      return {
        n:1,//用户选择的数字
      }
    },
    computed:{
      // 借助mapState生成计算属性，从state中读取数据（对象写法）
      // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

      // 借助mapState生成计算属性，从state中读取数据（数组写法）  
      ...mapState(['sum','school','subject']),
      
      /* *************************************************************** */

      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法)
      // ...mapGetters({bigSum:'bigSum'}),

      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法)
      ...mapGetters(['bigSum'])
    },
    methods: {
      // 程序员亲自写方法
      /* increment(){
        this.$store.commit('JIA',this.n)
      },
      decrement(){
        this.$store.commit('JIAN',this.n)
      }, */
      // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（对象写法）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),

      // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（数组写法）
      // ...mapMutations(['JIA','JIAN']),

      /* ************************************************ */

      // 程序员亲自写法
      /* incrementOdd(){
          this.$store.dispatch('jiaOdd',this.n)
      },
      incrementWait(){
          this.$store.dispatch('jiaWait',this.n)
      }, */
      // 借助mapActions生成对应的方法，方法中调用dispatch去联系mutations（对象写法）
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

      // 借助mapActions生成对应的方法，方法中调用dispatch去联系mutations（数组写法）
      // ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    },
    mounted() {
      const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
      console.log(x);
    },
  };
</script>
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

# 多组件共享

配置store对象

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    /* jia(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIA', value)
    },
    jian(context, value) {
        // console.log('action中的jia被调用了',context,value);
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        // console.log('action中的jiaOdd被调用了',context,value);
            setTimeout(() => {
                context.commit('JIA', value)
        },500)
    }
}
// 准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutataion中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutataion中的JIAN被调用了', state, value);
        state.sum -= value
    },
    ADD_PERSON(state,value){
        console.log('mutataion中的ADD_PERSON被调用了', state, value);
        state.personList.unshift(value)
    }
}
// 准备state——用于存储数据
const state = {
    sum: 0 , //当前的和
    school:'尚硅谷',
    subject:'前端',
    personList:[
        {id:'001',name:'张三'}
    ]
}

// 准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

第一个组件Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大十倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <h3>Person组件的总人数是：{{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
    name: "Count",
    data() {
      return {
        n:1,//用户选择的数字
      }
    },
    computed:{
      // 借助mapState生成计算属性，从state中读取数据（数组写法）  
      // 读取人员列表personList
      ...mapState(['sum','school','subject','personList']),
      /* *************************************************************** */
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法)
      ...mapGetters(['bigSum'])
    },
    methods: {

      // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（对象写法）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),

      /* ************************************************ */
      // 借助mapActions生成对应的方法，方法中调用dispatch去联系mutations（对象写法）
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    },
    mounted() {
      // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
      // console.log(x);
    },
  };
</script>
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
43
44
45
46
47
48
49
50

第二个组件Person.vue

<template>  
    <div>
        <h1>人员列表</h1>
        <h3>Count组件求和为：{{sum}}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="add">添加</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{p.name}}</li>
        </ul>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'Person',
        data() {
            return {
                name:''
            }
        },
        computed:{
            personList(){
                return this.$store.state.personList
            },
            sum(){
                return this.$store.state.sum
            },
        },
        methods:{
            add(){
                const personObj = {id:nanoid(),name:this.name}
                this.$store.commit('ADD_PERSON',personObj)
                this.name = ''
            }
        }
    }
</script>
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

# 模块化

目的：让代码更好维护，让多种数据分类更加明确。

Module是模块的意思，为什么会在Vuex中使用模块呢？

  • Vues使用单一状态树，意味着很多状态都会交给Vuex来管理
  • 当应用变的非常复杂时，Store对象就可能变的相当臃肿
  • 为解决这个问题，Vuex允许我们将store分割成模块(Module)，并且每个模块拥有自己的State、Mutation、Actions、Getters等

修改store

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
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

组件读取state数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
1
2
3
4

组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
1
2
3
4

组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
1
2
3
4

组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
1
2
3
4

例子：

count组件

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大十倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <h3>Person组件的总人数是：{{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
    name: "Count",
    data() {
      return {
        n:1,//用户选择的数字
      }
    },
    computed:{
      // 借助mapState生成计算属性，从state中读取数据（数组写法）  
      ...mapState('countAbout',['sum','school','subject']),
      ...mapState('personAbout',['personList']),
      /* *************************************************************** */
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法)
      ...mapGetters('countAbout',['bigSum'])
    },
    methods: {

      // 借助mapMutations生成对应的方法，方法中调用commit去联系mutations（对象写法）
      ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

      /* ************************************************ */
      // 借助mapActions生成对应的方法，方法中调用dispatch去联系mutations（对象写法）
      ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    },
    mounted() {
      // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
      // console.log(x);
    },
  };
</script>
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
43
44
45
46
47
48
49
50

person组件

 <template>  
    <div>
        <h1>人员列表</h1>
        <h3>Count组件求和为：{{sum}}</h3>
        <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPersonServe">添加一个人，名字随机</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{p.name}}</li>
        </ul>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'Person',
        data() {
            return {
                name:''
            }
        },
        computed:{
            personList(){
                return this.$store.state.personAbout.personList
            },
            sum(){
                return this.$store.state.countAbout.sum
            },
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']
            }
        },
        methods:{
            add(){
                const personObj = {id:nanoid(),name:this.name}
                this.$store.commit('personAbout/ADD_PERSON',personObj)
                this.name = ''
            },
            addWang(){
                const personObj = {id:nanoid(),name:this.name}
                this.$store.dispatch('personAbout/addPersonWang',personObj)
                this.name = ''
            },
            addPersonServe(){
                this.$store.dispatch('personAbout/addPersonServe')
            }
        }
    }
</script>
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
43
44
45
46
47
48
49
50
51
52

将store中的两个模块分别提取出来

// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

import countOptions from './count'
import personOptions from './person'

// 创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

store/count.js

// 求和相关的配置
export default {
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            // console.log('action中的jiaOdd被调用了',context,value);
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            // console.log('action中的jiaOdd被调用了',context,value);
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    },
    mutations: {
        JIA(state, value) {
            console.log('mutataion中的JIA被调用了', state, value);
            state.sum += value
        },
        JIAN(state, value) {
            console.log('mutataion中的JIAN被调用了', state, value);
            state.sum -= value
        },
    },
    state: {
        sum: 0, //当前的和
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
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

store/person.js

import axios from 'axios'
import { nanoid } from 'nanoid'
// 人员管理相关的配置
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            }else{
                alert('添加的人必须姓王')
            }
        },
        addPersonServe(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response =>{
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error =>{
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutataion中的ADD_PERSON被调用了', state, value);
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}
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
上次更新: 2024/08/14, 04:14:33
onresize 事件
Vue-Computed vs Watch

← Vue-Computed vs Watch→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接