vuex状态管理简单入门

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相关的部分。

vuex状态管理简单入门

猜你喜欢