1.安装vuex
npm i --save-dev vuex
2.为了方便管理，在src目录下新建文件夹store
新建index.js进行初始化
新建state.js进行数据存储
新建mutations.js保存数据修改的方法
3.开始编写配置文件
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
// 存储数据
state,
// 修改方法
mutations
})
在main.js中引入并实例化
import store from '@/store/index'
new Vue({
el: '#app',
router,
// 实例化store
store,
render: h => h(App)
})
4.到这里vuex已经配置完成，只要在state.js中写入数据即可在项目中引用了
state.js
const state = {
//这里以常用的用户id为例，可以是任意你想保存的数据
userId: '0123456789'
}
export default state
5.现在你就可以在项目中的任何组件取到用户id，方法如下(关于map的作用就自己查阅资料吧)
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
userId: state => state.userId
})
},
// 然后在你需要的地方使用this.userId即可，如
created () {
console.log(this.userId)
}
}
6.关于修改state中属性的值
还是以用户id为例，每个用户保存的值必然是不同的，这个值需要用mutations中的方法来修改
mutations.js
const mutations = {
//save_userId是方法名， userId是传入的修改值
save_userId (state, userId) {
state.userId = userId
}
}
export default mutations
7.在需要保存用户id的地方调用mutations中的方法进行保存
import { mapMutations } from 'vuex'
export default {
// 引入方法save_userId方法
methods: {
...mapMutations({
save_userId: 'save_userId'
})
}
// 保存或修改数据
created () {
this.save_userId('987654321')
}
}
8.到这里数据的存储也完成了,取数据只要用第5步的方法即可，vuex的简单使用也不复杂，希望刚入门的小伙伴看完有所收获吧，之后有空在推出与actions相关的部分。
