Vuex的基本使用

最新推荐文章于 2024-09-16 03:58:35 发布

原创最新推荐文章于 2024-09-16 03:58:35 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

一、安装

npm格式：

npm install vuex --save
// 如果要指定版本--这里是指定vuex@4.0以上版本
// npm install vuex@next --save

Yarn

yarn add vuex

在main.js引入使用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

创建store文件夹，里面创建一个js文件 store/index.js

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

Vue.use(Vuex)  // 必须显式地通过 Vue.use() 来安装 Vuex

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
    subCount: 1
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

二、开始使用（显示）—state

在vue中state有三种用法(显示)
第一种

<div>增加的数量1：{{$store.state.addCount}}</div>

第二种

<div>减少的数量：{{countTest}}</div>
<script>
export default {
  data() {
    return {
      countTest: null
    }
  },
  mounted() {
    this.countTest = this.$store.state.subCount;  
  },
}
</script>

第三种

<div>增加的数量2：{{addCount}}</div>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['addCount'])
  },
}
</script>

三、Mutation

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

  mutations: {
    /*
    add 函数接收两个参数
    state: store里面的state对象（和mutition平级的state）
    data: 外界传入的值，可以随意命名，a,b,c都可以
    */ 
    add(state,data) {
      // 每点击一次，在原来的基础上加 data数值
      state.addCount += data;
    }
  },

触发mutations的第一种方式

  methods: {
    handleAdd() {
      // commit 的作用， 就是调用某个 mutation 函数
      this.$store.commit('add',2)
    }
  },

触发mutations的第二种方式

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
    subCount: 1,
    aTest: '我是测试1'
  },
  mutations: {
    /*
    add 函数接收两个参数
    state: store里面的state对象（和mutition平级的state）
    data: 外界传入的值，可以随意命名，a,b,c都可以
    */ 
    add(state,data) {
      // 每点击一次，在原来的基础上加 data数值
      state.addCount += data;
    },
    sub(state,step) {
      state.aTest = step;
    }
  },
})

<script>
// 从vuex 中 按需导入 mapMutations 函数
import {mapState, mapMutations} from 'vuex'
export default {
  computed: {
    ...mapState(['addCount'])
  },
// 通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
  methods: {
  // 讲指定的mutations 函数，映射为当前组件的methods 函数
    ...mapMutations(['sub']),
    handleAdd() {
      this.$store.commit('add',2)
    },
    handleTihuan() {
      this.sub('嘿嘿嘿！！！')
    }
  },
}
</script>

四、Actions

Actions 用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
触发actions的第一种方式：

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
  },
  mutations: {
    add(state) {
      state.addCount += 1;
    },
  },
  actions: {
    asyncAdd(context) {
      setTimeout(()=>{
        context.commit('add')
      },1000)
    }
  },
})
-----------------
  methods: {
    handleAdd() {
      this.$store.dispatch('asyncAdd')   // store 里面的方法名是哪个就在dispatch里面写哪个方法名
    },
  },

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

  actions: {
    asyncAdd(context,step) {
      setTimeout(()=>{
        context.commit('add',step)
      },1000)
    }
  }
-----
this.$store.dispatch('asyncAdd',2)

触发actions的第二种方式：

  actions: {
    asyncSub(context,step) {
      setTimeout(()=>{
        context.commit('sub',step)
      },1000)
    } 
  },

------
import {mapState, mapMutations, mapActions} from 'vuex'
  methods: {
    ...mapMutations(['sub']),
    ...mapActions(['asyncSub']),
    handleSub() {
      this.asyncSub(1);
    },
  },
------
// 或者直接在DOM元素中使用
<div>减少的数量：{{$store.state.subCount}}</div>
    <!-- <el-button type="warning" @click="handleSub">减少</el-button> -->
    <el-button type="warning" @click="asyncSub(2)">减少</el-button>

五、Getters

Getters用于对Store中的数据进行加工处理形成新的数据
① Getters 可以对Store 中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性。
② Store 中数据发生变化，Getters 的数据也会跟着变化。
使用getters的第一种方式：

  getters: {
 // 这里的state 是store 里面state
    showNumber: state => {
      return '当前最新的数据是【'+ state.testCount +'】'
    }
  },
-----------
  // this.$store.getters.名称
 this.$store.getters.showNumber

使用getters的第二种方式：

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
--------------
 computed: {
    ...mapGetters(['showNumber'])
  },
-----------
<div>{{showNumber}}</div>

六、modules(我这里后面更新的是vuex@4以上的)

1、先在store文件夹创建一个modules文件夹，里面新建你要见名知意的文件，我这里就使用home.js
在这里插入图片描述
2.store文件夹里面的index.js文件

import {createStore} from 'vuex'
import home from './modules/home'
const store = createStore({
  state() {
    return {
      counter: 100
    }
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {},
  getters: {},
  modules: {
    home
  }
})

export default store

3.modules文件夹里面的home.js

export const homeModule = {
 /* 官方定义：默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对
  同一个 action 或 mutation 作出响应。
  Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。
  必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

  如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。
  当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调 整命名
  namespaced: true,  // 开启命名空间 */
  state(){
    return {
      homeCounter: 100
    }
  },

  mutations: {
    increment(state) {
      state.homeCounter++;
    }
  },
  actions: {
    incrementAction(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleHomeCounter(state) {
      return state.homeCounter*2;
    }
  }
}

export default homeModule

4、在页面用使用
基本的写法：（普通写法）

<template>
  <div class="container">
    <div>这是测试modules的组件</div>
    module的值：<h3>{{$store.state.home.homeCounter}}</h3>
    module的值：<h3>{{$store.getters["home/doubleHomeCounter"]}}</h3>
    modules的按钮：<button @click="increment">+1</button>
    modules的按钮action：<button @click="incrementAction">+1</button>
  </div>
</template>
<script>
export default {
  methods: {
    increment() {
      this.$store.commit('home/increment')
    },
    incrementAction() {
      this.$store.dispatch('home/incrementAction')
    }
  },
}
</script>

辅助函数的写法
第一种写法：(辅助函数写法)

<template>
  <div class="container">
    <div>这是测试module辅助函数的组件</div>
    module的值：<h3>{{homeCounter}}</h3>
    module的值：<h3>{{$store.getters["home/doubleHomeCounter"]}}</h3>
    modules的按钮：<button @click="increment">+1</button>
    modules的按钮action：<button @click="incrementAction">+1</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapGetters,mapActions} from 'vuex'
export default {
  name: '',
  components: {

  },
  data() {
    return {

    }
  },
  computed: {
    // 写法一
    ...mapState({
      homeCounter: state => state.home.homeCounter
    }),
     ...mapGetters({
      doubleHomeCounter: "home/doubleHomeCounter"
    })
  },
  mounted() {
    
  },
  methods: {
    // 写法一
    ...mapMutations({
      increment: "home/increment"
    }),
    ...mapActions({
      incrementAction: "home/incrementAction"
    })
  },
}
</script>

第二种写法：(辅助函数写法)

<template>
  <div class="container">
    <div>这是测试module辅助函数的组件</div>
    module的值：<h3>{{homeCounter}}</h3>
    module的值：<h3>{{$store.getters["home/doubleHomeCounter"]}}</h3>
    modules的按钮：<button @click="increment">+1</button>
    modules的按钮action：<button @click="incrementAction">+1</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapGetters,mapActions} from 'vuex'
export default {
  name: '',
  computed: {
    // 写法二
    ...mapState('home',['homeCounter']),
    ...mapGetters('home', ['doubleHomeCounter'])
  },
  methods: {
    // 写法二
    ...mapMutations('home', ['increment']),
    ...mapActions('home', ['incrementAction']),
  },
}
</script>

第三种写法：(辅助函数写法)

<template>
  <div class="container">
    <div>这是测试module辅助函数的组件</div>
    module的值：<h3>{{homeCounter}}</h3>
    module的值：<h3>{{$store.getters["home/doubleHomeCounter"]}}</h3>
    modules的按钮：<button @click="increment">+1</button>
    modules的按钮action：<button @click="incrementAction">+1</button>
  </div>
</template>

<script>
// createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：
import { createNamespacedHelpers } from 'vuex'
// 解构 createNamespacedHelpers("home") 里面的home 是你文件的名字，我这里是创建了home.js
const {mapState, mapMutations, mapGetters,mapActions} = createNamespacedHelpers("home")
export default {
  name: '',
  computed: {
    // 写法三
    ...mapState(['homeCounter']),
    ...mapGetters(['doubleHomeCounter'])
  },
  mounted() {
    
  },
  methods: {
    // 写法三
    ...mapMutations(['increment']),
    ...mapActions(['incrementAction']),
  },
}
</script>