Vuex的个人理解

Vuex 四个属性

state,mutations,getters,actions(先说前面两个)

//先新建store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({ //声明一个store实例
    state,//数据 ---->state声明看1.state
    mutations,//方法
    getters,//比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。
})
复制代码

1.state (相当于参数/对象)-辅助函数(mapState)

//store.js  定义一个count参数
const state = {
    count:1
}
复制代码

2.mutations(相当于方法,vue中的methods)-辅助函数(mapMutations)

//store.js 定义add和reduce方法
const mutations = {
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count-=1;
    },
}
复制代码

3.getters(相当于计算属性,vue中的computed)-辅助函数(mapGetters)

const getters = {
    count(state){
        return state.count +=100;
    }
}
复制代码

4.actions(和mutations差不多，mutations为同步，actions为异步)(mapActions)

• actions不能直接单独修改state里面的值，需要用到mutations来间接修改。

//store.js
mutations: {
    INCREMENT(state,val){
        state.val = val //输出为‘我是值’
    }
}
actions: { //存放异步方法
    incrementAsync( {commit} ){
      return new Promise((resolve,reject) =>{
        setTimeout(()=>{
          commit('increment',val)//increment是mutations里面的方法名
          resolve()
        },1000)
      })
    }
  }
//.vue
methods:{
    add(){
            this.incrementAsync({'我是值'})
          },
    ..mapActions['incrementAsync']
}
复制代码

<!--最后新建count.vue-->
<template>
    <div class="vuex">
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{count}}</h3>
        <div>
            <button @click="add(2)">+</button>
            <button @click="reduce()">-</button>
        </div>
        <div>
            <span>改变count内的值</span>
            <button @click="changeCount()">变为666</button>
        </div>
    </div>
</template>
<script>
    import {mapState,mapMutations,mapGetters } from 'vuex';//引入vuex的辅助函数  mapState,mapGetters放在couputed中;magMutations放在methods中
    export default{
        data(){
            return{
                msg:'Hello Vuex',

            }
        },
        created(){
            //console.log(18,this.$store);

        },
        methods:{
            ...mapMutations(['add','reduce']),
            changeCount(){
                console.log(32,this.count);
            }
        },
        computed:{
            // 使用对象展开运算符将此对象混入到外部对象中
            ...mapState(['count']),
            //...mapGetters(["count"])
        }

    }
</script>

复制代码

*注意事项

要改变state内参数的值，只能在mutations中调用方法改变。

由于页面刷新之后，数据就没了，要本地存储下

//在页面加载时读取localStorage里的状态信息
        localStorage.getItem("vuex_store_second") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("vuex_store_second"))));
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("vuex_store_second",JSON.stringify(this.$store.state))
        });
复制代码

转载于:https://juejin.im/post/5afe96b5f265da0b7f44ccad