引入Vuex+vue-devtools --项目记录（七）

1.什么是vuex

用来解决多个组件共享状态
VueJS中学习使用Vuex详解
由于我们使用得是vue-cli3.0所以默认情况下我们是使用vuex得，src文件夹下会有一个store.js文件
store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

在main.js中默认会引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/styles/global.scss'

Vue.config.productionTip = false

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

2.vuex基础用法

在actions的setTest方法中通过commit方法调用mutations的SetTest方法来修改state中的test属性；
store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    test: 1
  },
  mutations: {
    'SetTest': (state,newTest)=>{
      state.test = newTest
    }
  },
  actions: {
    //commit参数用来调用mutations方法，state用来获取原先得值
    setTest: ({commit,state},newTest)=>{
      // console.log(state.test,newTest)
      // 修改test得值
      return commit('SetTest',newTest)
    }
  }
})

App.vue
通过this.$store.dispatch来调用store.js中的actions中的setTest方法并传递值，调用后打印出修改后的test属性的值

mounted () {
   //this.$store.dispatch调用vuex
   this.$store.dispatch('setTest',10).then(()=>{
      console.log(this.$store.state.test)
   })
}

3.vuex模块化用法

在src目录下创建store目录，并且将store.js文件放入其中，将其更名为index.js,并且修改main.js文件的引用
main.js

import store from './store/index'

index.js中引用创建的模块

import Vue from 'vue'
import Vuex from 'vuex'
import book from './modules/book'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    book
  }
})

然后再store目录下创建modules目录，并且在下面创建一个book.js文件，创建一个book模块

const book = {
    state: {
      test: 1
    },
    mutations: {
      'SetTest': (state,newTest)=>{
        state.test = newTest
      }
    },
    actions: {
      //commit参数用来调用mutations方法，state用来获取原先得值
      setTest: ({commit,state},newTest)=>{
        // console.log(state.test,newTest)
        // 修改test得值
        return commit('SetTest',newTest)
      }
    }
}
export default book

我们修改完这些的时候会发现在App.vue中打印的test属性为underfined,所以我们可以通过vue调试工具查看vuex

从上边我们可以看出test属性在book这个对象内，所以我们需要对App.vue中的调用方法进行修改

export default {
    mounted () {
      //this.$store.dispatch调用vuex
      this.$store.dispatch('setTest',10).then(()=>{
        console.log(this.$store.state.book.test)
      })
    }
  }

4.通过getter特性简化我们获取vuex中变量的方式

原先获取方式

this.$store.state.book.test

如何简化为

this.test

具体方法如下

1.首先我们在store目录下创建getters.js文件

const book = {
    book: state => state.book.test
}
export default book

2.store目录下的index.js中引入getters.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import book from './modules/book'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    book
  },
  getters
})

3.App.vue通过mapGetters使用getters方法

  import {mapGetters} from 'vuex'
  export default {
    computed: {
    	...mapGetters(['test'])
    },
    mounted () {
      //this.$store.dispatch调用vuex
      this.$store.dispatch('setTest',10).then(()=>{
        console.log(this.test)
      })
    }
  }

4.在浏览器中不能打印出修改后的test的值，会出现如下错误

解决以上问题，需要修改getters.js文件

const book = {
    test: state => state.book.test
}
export default book

5.vue的调试工具，当我们无法给谷歌浏览器安装vue的调试插件的时候，我们可以考虑使用离线调试工具vue-remote-devtools

在命令行中输入

npm install -g @vue/devtools

安装完成后我们在命令行中输入如下指令进行运行

vue-devtools

会出现如下弹窗

然后我们将Add框中的一段代码粘贴放到index.html文件中，放好之后会出现如下界面

注意：我们在项目上线时要把index.html粘贴的那个代码段注释掉