原文可扫码查看,搜索 vueX 的使用
前置条件:
开发环境:nodeJS
开发框架:vue-cli 3.0
vueX 文档 https://vuex.vuejs.org/zh/installation.html
正文:
方法一:
- 使用npm安装vueX
1.1 在项目根目录下执行vue命令:npm install vuex --save,安装vueX插件。 - 安装成功以后,在src目录下新建一个文件夹store,在store里面新建一个index.js
- 在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: {
}
})
- 在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')
- 在需要使用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)
})
}
}
方法二:
- 在src目录下新建一个文件夹store,在store里面新建一个文件modules,在modules里面新建一个book.js
- 其实 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
- 重复方法一的步骤二,引入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
}
})
- 在需要使用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;
- 新建一个getters.js;在book 对象下声明一个test函数,return 出 state.book.test
// getters.js
const book = {
test: state => state.book.test
}
export default book
- 在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
})
- 在需要使用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)
})
}
}