vuex探索及使用

思考 vuex是什么，有什么好处，缺点？vuex写法

vuex介绍 相当于一个公共仓库，保存着所有组件都能共用的数据

• state:变量可以改变数据

• mutations 是唯一一种方式来修改state中的状态的， mutation必须同步执行

• getters是store的计算属性，每当state中的值变化时，它也会自动更新， 类似vue计算属性

• actions 提交的是 mutation，而不是直接变更状态。 actions 主要用来进行异步操作，也可以包含同步

在组件的自定义方法中，使用this.$store.commit方法，把新的值提交给mutations中对应的方法
mutations属性中的每个方法中有两个参数，分别为state和payload；state其实就是vuex中的state属性，payload叫做mutations的载荷，其实就是传过来的值。一般payload传的是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

vuex 基础使用

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate';//数据持久化插件

//1.安装插件
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state:{
    counter:1000   //state：存放需要共享的状态信息，使用时通过 $store.state.counter 即可拿到状态信息。

  },
  mutations:{
 sub(){//this.$store.commit('sub')  对 state 的状态信息进行修改：先拿到 store 对象，然后通过 commit 提交 mutations 中的方法。
 }
  },
  actions:{
 
  },
  getters:{
  powerCounter(state){ // $store.getters.powerCounter 获取
      return state.counter * state.counter
    },

  },
  modules:{
    
  },
  plugins: [persistedState()], //是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失,默认存储到localStorage

})
//3.导出使用
export default store
new Vue({//在vue实例中注册
  store
})

回顾了下计算属性

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

当一个数据受多个数据影响时，可以使用computed
计算属性基本写法
computed: {
reversedMessage () {
return this.message.split(‘’).reverse().join(‘’)
}
}
体会：虽然写的和方法一样，实际是拿方法名当实例的属性来用

遇到的问题

涉及到getters调用的可能会触发其他函数被执行

一开始以为是store会触发，但是保留state调用，注释getters时则没有
vuex会刷新页面 getters怎么触发调用 actions还没使用

vuex的优点和缺点

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

刷新浏览器，vuex中的state会重新变为初始状态
解决方案-插件vuex-persistedstate ,见上方vuex的基础使用

getters相当于vue computed
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
虽然组件内也可以做计算属性，但getters 可以在多组件之间复用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
   <button @click="countAdd">+20</button>
     <div>计数器的2倍：{{thisDoubleCount()}}</div>
    
</template>



export default {
  name: 'HelloWorld',
  methods:{
    countAdd(){//一旦依赖值发生变化就会重新计算 getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
      this.$store.commit('add',20);//这样写会多次触发getters函数，因为powerCounter方法依赖的数据counter被+20了
    },
    thisDoubleCount(){
      return this.$store.getters.powerCounter;
    },
   
  },
}

store 中
.....
getters:{
        powerCounter(state){ // $store.getters.powerCounter 获取
            return state.counter * 2
        },
    },
....

actions

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作，也可以包含同步
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 调用，通过 this.$store.dispatch(‘xxx’)方法触发： 或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
通过 mapActions

分发actions的简便写法

export default new Vuex.Store({
    state:{
        counter:500   //state：存放需要共享的状态信息，使用时通过 $store.state.counter 即可拿到状态信息。
    
    },
    mutations:{
        add(state,payload){//this.$store.commit('sub')  对 state 的状态信息进行修改：先拿到 store 对象，然后通过 commit 提交 mutations 中的方法。
             state.counter+=payload;
            // setTimeout(() => {

            //     state.counter += payload
                
            //     }, 3000)
        },
        sub(state,payload){//this.$store.commit('sub')  对 state 的状态信息进行修改：先拿到 store 对象，然后通过 commit 提交 mutations 中的方法。
            state.counter-=payload;
        },
        dubNum(state,payload){//this.$store.commit('sub')  对 state 的状态信息进行修改：先拿到 store 对象，然后通过 commit 提交 mutations 中的方法。
            state.counter*=payload.num;
        },
        dubreverse(state,payload){//this.$store.commit('sub')  对 state 的状态信息进行修改：先拿到 store 对象，然后通过 commit 提交 mutations 中的方法。
            // state.counter= state.counter/payload;
         
            axios.get("http://127.0.0.1:8081/src/components/data.json").then(function(res){
                console.log(res.code);
                state.counter=6666;
            }).catch(function(rej){
                console.log(rej);
            })
        },
    },
    getters:{
        powerCounter(state){ // $store.getters.powerCounter 获取
            return state.counter * 2
        },
    },
    plugins: [persistedState()], //是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失,默认存储到localStorage
    actions:{
        increament(context,payload){  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
            context.commit('sub',payload) 
        },
        dublAction(context,payload){  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
            context.commit('dubNum',payload) 
        },
        counter_add(context,payload){
            context.commit('add',payload);
        },
        async_action(context,payload){ //触发异步方法
            setTimeout(function(){
                context.commit('dubreverse',payload)
            },2000)
        }
    }

      
})


import { mapActions } from 'vuex'
export default {
  // ...
 methods:{
      //将 `this.incrementBy()` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ...mapActions(['increament','dublAction','counter_add','async_action']), /// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')
    countSub(){
    //   this.$store.commit('sub',20);
        this.$store.dispatch('increament',20)//Action 通过 store.dispatch 方法触发：
    },countDulble(){
        //  this.$store.dispatch('dublAction',{num:2});//Actions 支持同样的载荷方式和对象方式进行分发：
        this.$store.dispatch({
            type:'dublAction',
            num:2
        });
    },countAdd(){
        this.counter_add(20);
    },countDulblereverse(){
        this.async_action(2)
    }

}
  }

关于actions中context

commit: ƒ boundCommit(type, payload, options)
dispatch: ƒ boundDispatch(type, payload)
getters: {}
rootGetters: {}
rootState: {ob: Observer}
state: {ob: Observer}

Actions 支持同样的载荷方式和对象方式进行分发：

countDulble(){
// 1.Actions 支持同样的载荷方式进行分发：
 this.$store.dispatch('dublAction',{num:2});
 //1.Actions 对象方式进行分发
this.$store.dispatch({
    type:'dublAction',
    num:2
});
}

批量注册mutations中方法 mapMutations

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

小补充 关于–save -dev –save安装的区别 生产环境所要依赖的包

“dependencies”: {
“vue”: “^2.5.2”,
“vue-router”: “^3.0.1”
},
devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；

后面部分为–save -dev 的情况会使得下载的插件放在package.json文件的devDpendencies对象里面
后面部分为–save的情况会使得下载的插件放在package.json文件的dependencies对象里面

注意：vue2只能用vuex 3. 如果vue2用vuex 4.会报错

参考过的文章：https://blog.csdn.net/l13640698113/article/details/109224692