vuex的使用记录

下载

npm install vuex --save 或安装指定版本 npm install [email protected]
注意：vuex4只能vue3使用，vue2可以使用vuex3。

安装完成后，创建 src/store/index.js 文件

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

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {
    count:0
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
})

// 3.导出store对象
export default store

在main.js中引入

import Vue from 'vue'
import App from './App'
import store from '@/store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: ''
})

验证是否创建成功

<template>
  <div class="hello">
    {{ $store.state.counter }}
  div>
template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  },
  methods: {
  }
}
script>

vuex存储数据

在mutations 中操作 state

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

Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {
    routerData:[]
  },
  mutations: {
    updateData(state,data){
      state.routerData = data
    }
  },
  actions: {},
  getters: {},
  modules: {},
})

// 3.导出store对象
export default store

在页面中使用 this.$store.commit('updateData', res.data);
在router中使用 router.app.$options.store.commit('updateData', res.data);