Vuex

注意命名空间中的state为方法 //index.js

  //创建项目的时候会生成store/index.js
   
   import { createStore } from 'vuex' //自带的 创建仓库
   
   
   export default createStore({

// state特点：1、单一状态树，不建议直接更改  2、支持响应式  3、保存到内存中，默认情况下无法持久化
# 一
  state: {
     name:"hj",
     age:16,
     arr:['1','3','4','6','9','10']
  },

  // 对数据过滤
# 二
// 处理程序    不会影响原数组
  getters: {
    filterArr3(state,getters,n){
      return function(n){
        return state.arr.slice(0,n)
      }
    },

   //filterArr4: state=>n=>state.arr.slice(0,n)

  },
# 三
// 定义很多的处理程序handler，更改state中的数据
// 参数1：就是state数据
// 如何调用这个方法？   $store.commit('changeCount')
  mutations: {
  changeCount2(state, n) {
      console.log(n);
      state.count = state.count + n;
    },
  },

# 四
  //同步|异步  特点：不能直接操作state，去调用mutations
  actions: {
    // context 上下文对象  相当于是$store  当前仓库
    changeStrAction(context, n) {
      // commit 调用mutations中的方法
      context.commit('changeCount2', n);
    }
  },

# 五
  // 模块化 类似命名空间注册 当项目大的时候，管理得数据越来越多了，需要分区处理
  modules: {
    abc,
    def,
  }
})

//a.js

//1.在index.js引入 2. 在modules注册
  export default {
    // 命名空间

    namespaced: true,
    state() {
        return {
           name:'持',
        }
    },
    mutations: {
       changename(state,s) {
            console.log(s);
            state.name=s;
            console.log( state.name);
        }
    },
    actions: {
     changenameAsync(context,s){
            console.log(context,s);
            context.commit('changename',s)
        }
    },
    getters:{
    }

}

vue

   <!-- 以计算属性调用 -->
   <h3>{{$store.getters.filterArr3(3)}}</h3>

//mutations
<h3>{{$store.state.name}}--{{$store.state.age}}</h3>
    <button @click="$store.commit('change')">改变age</button>
    
 //actions
<h3>{{$store.state.abc.name}}</h3>
    <button @click="$store.dispatch('abc/changenameAsync','hh')">modulea 该便名字</button>

 // 导入映射函数
 <p>{{ count }}--{{ str }}--{{ arr }}--{{ c }}--{{ s }}--{{ a1 }}--{{ b1 }}</p>
    <p>{{ filterArr }}--{{ f2 }}</p>

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
    // 仓库里的state和getters都是属性方式使用的，映射到计算属性中
    computed: {
        // 数组写法
        ...mapState(['count', 'str', 'arr']),
        // 对象写法
        ...mapState({ c: 'count', s: 'str' }),
        // 映射a模块
        ...mapState({
            a1: state => state.abc.msg,
            b1: state => state.def.msg,
        }),
        ...mapGetters(['filterArr']),
        ...mapGetters({f2: 'filterArr2'}),
    },
    // 仓库中的mutations和actions  需要映射到methods中
    methods: {
        ...mapMutations(['changeCount']),
        ...mapMutations({c2: 'changeCount2', ac: 'abc/changeMsg', bc: 'def/changeMsg'}),
        ...mapActions(['changeStrAction'])
    }
}

导入持久化模块

 yarn add vuex-persist
 //a.
 import VuexPersistence from 'vuex-persist';
 
 // b、创建持久化实例
let persist = new VuexPersistence({
  //选择
  // storage: sessionStorage,
  storage: localStorage,
})

// c、使用
  plugins: [persist.plugin],