Vuex的简单入门

明知山

发布于 2020-09-03 10:22:05

2820

发布于 2020-09-03 10:22:05

在Vue项目中安装Vuex

npm install vuex --save

在src目录下新建个store文件夹，里面新建index.js 在index.js文件夹中创建Vuex实例

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store=new Vuex.Store({
    state:{
       
    }
})

export default store//导出store

在main.js中引入该文件

import store from './store'

new Vue({
  store
})

在这里我们就引入完成了，现在开始编写业务代码 在store/index.js文件中，vuex中的数据源，我们需要保存的数据就保存在这里。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store=new Vuex.Store({
    state:{
        count:100
    }
})

export default store//导出store

可以在组件中通过 this.$store.state来获取我们定义的数据；

<template>
  <div>
  <h1>{{this.$store.state.count}}</h1>
  </div>
</template>

页面上就打印个“100”

使用Getters

可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //这里的state指向上面定义的
       return state.count/2;
    }
  }
})

export default store //导出store

<h2>{{this.$store.getters.divide}}</h2>

页面上就打印个“50”

使用Mutations

可以将 mutations可以理解为methods

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //上面定义的state对象
       return state.count/2;
    }
 },
  mutations:{
      add(state){ //上面定义的state对象
        state.count = state.count + 1;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  }
})

export default store //导出store

我们添加两个方法add和reduction，执行加1、减1的操作在methods定义方法名，引入mutations中定义两个函数

<template>
  <div>
    <h1>{{this.$store.state.count}}</h1>
    <h2>{{this.$store.getters.divide}}</h2>
    <input type="button" value="+" @click="addcount" />
    <input type="button" value="-" @click="reductioncount" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    addcount() {
      this.$store.commit("add");
    },
    reductioncount() {
      this.$store.commit("reduction");
    }
  }
};
</script>

<style>
</style>

使用Action

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 Mutations只能是同步。

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

//使用Vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 100
  },
  getters: {
    divide: (state) => { //上面定义的state对象
      return state.count / 2;
    }
  },
  mutations:{
      add(state){ //上面定义的state对象
        state.count = state.count + 1;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  },
  actions:{
      addNum(context){ //接收一个与store实例具有相同方法属性的context对象
        context.commit("add"); //mutatuions里的方法名
      },
      reductionNum(context){
          context.commit("reduction");
      }
  }
})

export default store //导出store

在组件中接收

  methods: {
    addcount() {
      //this.$store.commit("addNum");
       this.$store.dispatch("addNum");
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }

我们还可以给方法添加参数

  methods: {
    addcount() {
      var n=20;
      //this.$store.commit("addNum");
       this.$store.dispatch("addNum",n);
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }

并且需要在mutations和actions都添加

  mutations:{
      add(state,n){ //上面定义的state对象
        state.count = state.count + n;
      },
      reduction(state){
        state.count = state.count - 1;
      }
  },
  actions:{
      addNum(context,n){ //接收一个与store实例具有相同方法属性的context对象
        context.commit("add",n);
      },
      reductionNum(context){
          context.commit("reduction");
      }
  }

mapState、mapGetters、mapActions 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

<template>
  <div>
    <h1>页面获取的值{{this.$store.state.count}}</h1>
    <h2>Getters获取的值{{this.$store.getters.divide}}</h2>
    <h3>{{countNum}}</h3>
    <input type="button" value="+" @click="addcount" />
    <input type="button" value="-" @click="reductioncount" />
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      countNum: state => state.count
    })
  },
  methods: {
    addcount() {
      var n = 20;
      //this.$store.commit("addNum");
      this.$store.dispatch("addNum", n);
    },
    reductioncount() {
      //this.$store.commit("reductionNum");
      this.$store.dispatch("reductionNum");
    }
  }
};
</script>

<style>
</style>

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-08-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

javascript

登录后参与评论

0 条评论

热度