vue正确的使用vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。现在大型项目基本上都需要使用vuex，所以专门写一遍如何配置与使用vuex供人探讨。

一、安装vuex

1、终端安装 npm install vuex --save

2、创建store文件夹，文件夹里新建index.js与modules文件夹（vuex模块化）

index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
//引入模块
import a from './modules/a'
import b from './modules/b'
import c from './modules/c
export default new Vuex.Store({
  state: {
    axiosCancel: []
  },
  mutations: {},
  actions: {},
  modules: {
    a,
    b,
    c
  }
})

modules里面放置store模块

比如a模块里面代码（namespaced作用：为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名）

const state = {

  basePath: 'homepage'
}

const mutations = {

  CHANGE_BASEPATH: (state, path) => {
    state.basePath = path
  }
}

const actions = {

  changeBasePath({ commit }, path) {
    commit('CHANGE_BASEPATH', path)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3 main.js文件引入

代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、使用vuex

新建一个demo代码如下：

<template>
  <div class="">a模块调用mutation的值:{
   
   { basePath }}</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      'basePath': state => state.a.basePath
    })

  },
  watch: {},
  created() {
    // 使用a模块的state
    console.log(this.$store.state.a)
    // 使用a模块的mutation(不推荐这样写，推荐写成对象的形式{path:'qqqq'},这样可以传多个参)
    this.$store.commit('a/CHANGE_BASEPATH', 'qqqq')
    // 使用a模块的action
    this.$store.dispatch('a/changeBasePath', 'bbbb')
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>

把state放在computed里这样state的值改变dom的值也改变

猜你喜欢