vueX 的使用

原文扫码查看：

前置条件：

    开发环境：nodeJS

    开发框架：vue-cli 3.0

    vueX 文档 https://vuex.vuejs.org/zh/installation.html

正文：

方法一：

1. 使用npm安装vueX

   1.1 在项目根目录下执行vue命令：npm install vuex --save，安装vueX插件。

2. 安装成功以后，在src目录下新建一个文件夹store，在store里面新建一个index.js

3. 在indx.js里面引入Vuex

   // index.js
   import Vue from 'vue'
   // 引入vuex
   import Vuex from 'vuex'
   // 注册vuex
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state: {
      test: 1
     },
     mutations: {
       'SET_TEST': (state, newTest) => {
         state.test = newTest
       }
     },
     actions: {
       setTest: ({commit,state},newTest) => {
         // 修改state的值;使用return 调用的时候可以用链式结构的方法进行调用
         // state原始值，newTest 改变以后的值
         return commit('SET_TEST',newTest)
       }
     },
     modules: {
     }
   })

　　4. 在main.js 里面引入 src 目录下的 store　　 

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入  store
import store from './store'
new Vue({
  router,
  // 注入 store
  store,
  render: h => h(App)
}).$mount('#app')

5. 在需要使用vueX的页面可以直接使用，我是在home.vue调用

5.1 通过 this.$store 读取 state 的值

// home.vue
mounted () {
    // 用 vuex 中存储的objName方法，读取出里面的值
    let test = this.$store.state.test;
    console.log('读取test', test)
    /**
    * 改变test的值;this.$store.dispatch提交到actions下的setTest；
    * setTest再去调用SET_TEST方法改变test的值
    **/
    this.$store.dispatch('setTest', '李四').then(() => {
      console.log(this.$store.state.test)
    })
  }
}

方法二：

1. 在src目录下新建一个文件夹store，在store里面新建一个文件modules，在modules里面新建一个book.js

2. 其实 book.js 里面的内容就是方法一步骤3里面的代码，把里面的代码单独提出来了。

注：方法一的步骤4不可缺少，执行方法一的步骤4;

// book.js
const book = {
  state: {
   test: 1,
  },
  mutations: {
    'SET_TEST': (state, newTest) => {
      state.test = newTest
    }
  },
  actions: {
    setTest: ({commit,state},newTest) => {
      // 修改state的值;使用return 调用的时候可以用链式结构的方法进行调用
      return commit('SET_TEST',newTest)
    }
  },
  // modules: {
  // }
}
export default book

3. 重复方法一的步骤二，引入book.js

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

Vue.use(Vuex)

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

4. 在需要使用vueX的页面可以直接使用，我是在 home.vue 调用

//  home.vue
export default {
  mounted () {
    // 调用 vuex中存储的setTest方法，并且改变test的值为1.1
    this.$store.dispatch('setTest', 1.1).then(() => {
      console.log(this.$store.state.book.test)
    })
  }
}

方法三：使用 mapGetters，部分内容参照方法二；

    注：方法一的步骤4不可缺少，执行方法一的步骤4;

1. 新建一个getters.js；在book 对象下声明一个test函数，return 出 state.book.test

// getters.js
const book = {
  test: state => state.book.test
}

export default book

2. 在index.js 里面引入 getters.js；

2.1 注：其实就是在方法二步骤3下的index.js 里面引入getters.js

2.2 book.js 内容参照方法二步骤2的book.js

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

Vue.use(Vuex)

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

3. 在需要使用vueX的页面可以直接使用，我是在 home.vue 调用

3.1 home.vue 引入mapGetters，将 getters.js 的函数传进mapGetters，代码如下：

// home.vue
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['test'])
  },
  ,
  mounted () {
    // 调用 vuex中存储的setTest 的值并且改变test的值
    this.$store.dispatch('setTest', 1.1).then(() => {
      // 打印出 test 的值
      console.log(this.test)
    })
  }
}