vuex及基本方法

1、把组件之间共享的数据放在vuex中

2、vuex中的数据是响应式的

如果一个组件中修改了数据，另外一个使用vuex数据的组件，就会自动更新

3、本地存储的数据和vuex的区别：一个自动一个手动

一、vuex的准备工作

在store/index.js

引入

yarn add vuex@3.6.2

import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)

创建

const store =new Vuex.Store()

挂载

export default store

main.js

import store from './store'

new Vue({
  // 3、挂载
  router,
  store,
  render: h => h(App),
}).$mount('#app')

二、vuex的使用

store/index.js

const store =new Vuex.Store({
    state:{
        name:'hello',
        age:99
    }
})

App.vue

<template>
  <div>
    {
  { $store.state.name }}
    {
  { $store.state.age }}
  </div>
</template>

export default {
  created() {
    console.log(this.$store.state.name);
    console.log(this.$store.state.age);
  },
};

三、mutation

mutations：放置修改state数据的方法

里面所有方法，第一个参数都是state

传参

store/index.js

const store =new Vuex.Store({
    state:{
        name:'hello',
        age:99
    },
    mutations:{
        updateName(state,payload){
            state.name=payload.n
        },
        updateAge(state,payload){