vuex(超详细)_vue 2.5.2 vuex-CSDN博客

本文链接：https://blog.csdn.net/m0_53912016/article/details/122599212

vue安装Vuex

当然了如果你创建脚手架的时候直接勾选就可

1.安装：

 cnpm install vuex --save

安装完成会在项目的package.json文件中显示vuex插件，如下：

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.3.0"
  },

2 新建store.js文件内容

在这里插入图片描述

在store文件夹下新建index.js
如下所示:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    //所有的数据都放在state中相当于data
    state:{},
    //操作数据，唯一的通道是mutations
    mutations:{},
 //actions,可以来做异步操作，然后提交给mutations，而后再对state(数据)进行操作
    actions:{},
    modules: {
   }
})

3 main.js中应用vuex

import store from './store'

new Vue({
  el: '#app',
  router,
  store,   //在new Vue中使用
  components: { App },
  template: '<App/>'
})

vuex的属性

 state: {
  //所有共享的数据都要统一放到 Store 中的 state 中进行存储
  //共享数据存放
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }

1 state的使用

访问State 中数据的两种方式

store页面

store-index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {//相当于data
  list:"12121212121",
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

需要页面展示的store值

第一种获取(初级)

!<template>
  <div class="main">
   <div>
     {{test}}
   </div>
  </div>
</template>
<script>
export default {
data(){
return{
 //this.$store.state.list获取state里面的值
  test:this.$store.state.list
}
}
}
</script>
<style lang="scss" scoped>
.main{
    background: #F5F8FF;
}
</style>

第2种获取(常用)

!<template>
  <div class="main">
   <div>
    {{list}} &nbsp; {{list1}}
   </div>
  </div>
</template>
<script>
// 1、从Vuex中导入 mapState 函数
import { mapState } from 'vuex'
export default {
data(){
return{
}
},
// 2、将全局数据，映射为当前组件的计算属性
computed: {
   ...mapState(['list','list1'])
}
}
</script>
<style lang="scss" scoped>
.main{
    background: #F5F8FF;
}
</style>

2 mutations的使用

mutations用户变更 Store 中的数据
①只能通过 mutations 变更 Store数据，
不可以直接操作Store中的数据
②通过这种方式虽然操作稍微繁琐一些，
但是可以集中监控所有数据的变化

store页面

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {//相当于data
   count: 0
  },
  mutations: {
    // 函数中第一个形参永远都是自身的 state，该形参就是上面的 state 对象
    btnadd(state) {
      state.count++
    },
    btnaddN(state, step) {//以上存的值保存在这里
      // state.count的 state永远是自身的state 
      // .count是state里面的方法
      state.count +=  step
    }
  },
  actions: {
  },
  modules: {
  }
})

需要页面展示的store值

第一种方法

<template>
    <div>
        <h3>当前最新的count值为：{{ $store.state.count}}</h3>
        <button @click="btnhandle">+4</button>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        btnhandle() {
        this.$store.commit('btnaddN',3)//这个是将值存在vuex里面
        }
    }
}
</script>

第二种方法

<template>
    <div>
        <h3>当前最新的count值为：{{ $store.state.count}}</h3>
        <button @click="handle">+1</button>
        <button @click="btnaddN(4)">+N</button>
    </div>
</template>
<script>
// 1、从 vuex 中导入 mapMutations 函数
import { mapMutations } from 'vuex'
export default {
    data() {
        return {};
    },
    methods: {
        handle() {
            this.$store.commit('btnadd')
        },
        // 2、将指定的 mutations 函数映射为当前组件的 methods 函数
        ...mapMutations(['btnaddN'])
    }
}
</script>

store页面

3 actions 使用

vuex中，mutations 函数不支持异步操作，
如果在 mutations 函数中使用异步操作，
会导致页面展示的数据与 
state 中的数据不同步，导致出现问题

actions 用于处理异步任务

需要页面展示的store值

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {//相当于data
   count: 0
  },
  mutations: {
    add(state) {
      state.count++
    },
  },
  actions: {
  // 第一个形参永远时 context， context 可以认为 New 出来的 Store对象
  addAsync(context) {
    setTimeout(() => {
      // 在 actions 中不能直接操作 state 中的数据,可以操作mutations里面的数据
      context.commit('add')
    },3000)
  }
  //注意：
//1、第一个形参永远时 context， 
//context 可以认为 New 出来的 Store对象

//2、在 actions 中不能直接操作 state 中的数据
//需要修改 state 中的数据，
//需要调用 mutations 中的函数
  },
  modules: {
    // 相当于一个模板块
  },
  getters:{

  }
})

将对应时间存在vuex里面

第一种方法

<template>
    <div>
        <h3>当前最新的count值为：{{ $store.state.count}}</h3>
        <button @click="handle">+1</button>
        <button @click="btnaddN(4)">+N</button>
        <button @click="addAsync1">+1 async</button>
    </div>
</template>
<script>
// 1、从 vuex 中导入 mapMutations 函数
import { mapMutations } from 'vuex'
export default {
    data() {
        return {};
    },
    methods: {
        handle() {
            this.$store.commit('btnadd')
        },
        // 2、将指定的 mutations 函数映射为当前组件的 methods 函数
        ...mapMutations(['btnaddN']),
        addAsync1() {
          // 这里的 dispatch 函数专门用来触发 actions
          this.$store.dispatch('addAsync')
        }
    }
}
</script>

触发 actions 异步任务时携带参数

<template>
    <div>
        <h3>当前最新的count值为：{{ $store.state.count}}</h3>
        <button @click="handle">+1</button>
        <button @click="btnaddN(4)">+N</button>
        <button @click="addAsync1">+1 async</button>
    </div>
</template>
<script>
// 1、从 vuex 中导入 mapMutations 函数
import { mapMutations } from 'vuex'
export default {
    data() {
        return {};
    },
    methods: {
        handle() {
            this.$store.commit('btnadd')
        },
        // 2、将指定的 mutations 函数映射为当前组件的 methods 函数
        ...mapMutations(['btnaddN']),
        
        addAsync1() {
          //这里的 dispatch 函数专门用来触发actions 函数 并传递参数
          this.$store.dispatch('addAsync',6)
        }
    }
}
</script>

第2种方法

<template>
    <div>
        <h3>当前最新的count值为：{{ $store.state.count}}</h3>
        <button @click="handle">+1</button>
        <button @click="btnaddN(4)">+N</button>
        <button @click="subAsyncN">+1 async</button>
    </div>
</template>
<script>
// 1、从vuex 中导入 mapActions 函数
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
    data() {
        return {};
    },
    methods: {
        handle() {
            this.$store.commit('btnadd')
        },
        // 2、将指定的 mutations 函数映射为当前组件的 methods 函数
        ...mapMutations(['btnaddN']),
         // 2、将指定的 actions 函数映射为当前组件的 methods 函数
        ...mapActions(['addAsync']),//这个映射的自定义参数要保持一致
        subAsyncN() {
          //这里的 dispatch 函数专门用来触发actions 函数 并传递参数
          this.$store.dispatch('addAsync',6)
        }
    }
}
</script>

Getter

类似于components

Getter 用于对 Store 中的数据进行加工处理形成新的数据。
1、Getter 可以对 Store 中已有的数据加工之后形成新的数据，
类似 vue 的计算属性
2、Store 中数据发生变化，
Getter的数据也会跟着变化
3、Getter 不会修改 state 中的数据

参考参考