vuex基础

vuex概述

# 优点：
    js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
    属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
    限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

# 缺点：
    刷新浏览器，vuex中的state会重新变为初始状态
    解决方案-插件 vuex-persistedstate

//组件之间数据共享方式
# 1.安装vuex
  npm i vuex -S

# 2.导入vuex 包
  import Vuex from 'vuex'
  VUe.use(Vuex)

# 3.创建Store 对象
  const store = new Vuex.Store({
      //state 中存放就是全局共享数据
      state: { count: 0 }
  })
  
# 4.将store 对象挂载到vue 实例中
  new Vue({
      el: '#app',
      router,
      store
  })

组件访问State 中的数据的第一种方式：
this.$store.state.全局数据名称

store.js

export default new Vuex.Store({
    //state公共状态仓库
    state: { n: 0 },  
    //操作state中数据的同步代码
    mutations: {
        addN(state, x) {
            this.state.n += x  
        }，
        list(e, x) {}  //接收action中触发的方法
    }, 
    //操作actions中的数据的异步代码
    actions: {
        reduceN(context, x) {
            setTimeout(() => {
                this.state.n -= x
                context.commit('list', 3)  //action中通过.commit方法触发一个list方法，并且携带一个参数
            }, 1000)
        }
    },  
    modules: {}
})

app.vue

methods: {
    add() {
        this.$store.commit('addN', 3)   //触发上面mutations中的 addN函数并添加一个参数3、选填
    },
    reduce() {
        this.$store.dispatch('reduceN', 3)  //触发上面actions中的 reduceN函数并添加一个参数3，选填
    }
}