0
点赞
收藏
分享

微信扫一扫

在vuex中五个模块的用法解析

朱小落 2021-09-24 阅读 95

1、首先需要的是在项目中安装,在Vuex的官网中提供了三种安装方式

页面:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM:

npm install vuex --save

Yarn:

yarn add vuex

2、在mian.js中定义vuex的每一个模块

import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.config.productionTip = false

//注册vuex
Vue.use(Vuex)  

const store = new Vuex.Store({  // 这里注意S要大写不然会报错
  //定义变量
  state: {
    num: 12 
  },
  // 定义方法
  mutations: {
    addnum(state, val) {  
      state.num += val
    },
    accnum (state, val) {
      state.num *= val
    }
  },
  // 修饰变量
  getters: {
    getnum(state){    
      return '数值为:'+ state.num  
    }
  },
  // 复杂的或多个的方法同时使用
  actions: {
    goingNum (context, val) {
      context.commit('addnum', val)
      context.commit('accnum', val)
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // store需要定义进来
  components: { App },
  template: '<App/>'
})

3、在业务页面使用定义好的变量和方法,通过传参来动态添加数据

  <div class="hello">
    <h2>{{num}}</h2>
    <h3>{{getnum}}</h3>
   <button @click="inNum">+</button>
   <button @click="goingisnum">GO</button>
  </div>
</template>

<script>
import {mapState , mapMutations, mapGetters, mapActions} from 'vuex' // 引入vuex的方法
export default {
  name: 'HelloWorld',
  computed: {
    // 映射出store中的变量,无需在data中定义,可以直接使用 
    ...mapState(['num']), 
    ...mapGetters(['getnum'])
  },
  data () {
    return {
      value: 188,
      val: 10
    }
  },
  methods: {
    // 映射store中的方法
    ...mapMutations(['addnum']), 
    ...mapActions(['goingNum']),
     // 使用方法,并用传参的方式动态添加数据
    goingisnum () {
      this.goingNum(this.val) // this.value就是本页面定义的参数
    },
    inNum () {
      this.$store.commit('addnum', this.value) // this.value就是本页面定义的参数
    }
  }
}
</script>

结果:

a、mian.js的原值num为12,本页面定义val为10,点击加号,调用addnum方法,数值为22

b、mian.js的原值num为12,本页面定义val为10,点击GO后,调用goingNum方法,执行加再执行乘,数值为220

4、modules模块的用法
a、首先新建文件夹src>sotre>modules,新建文件:modules>modules.js和 store>index.js

b、在main.js中引入整个store文件
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './stort'   // 引入文件

Vue.config.productionTip = false

Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  store, // 引入完成需要注册一下
  components: { App },
  template: '<App/>'
})
c、在index.js中注册所有的文件集合
import Vue from 'vue'
import Vuex from 'vuex'
import mustbe from './modules/mustbe.js'  // 将文件引入store中

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
      mustbe // 注册到store中
    }
  })
d、新建的文件中写入需要定义模块
const mustbe = {
    // 创建state模块
    state: {
        mustValue: 'i did it'
    }
}
export default mustbe
e、最后在逻辑页面拿到数据
  data () {
    return {
      mustValue: this.$store.state.mustbe.mustValue
    }
  }
举报

相关推荐

0 条评论