写给新手同学的vuex快速上手指北小结

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...}
})

export default store

 
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
  store,...
})
...

//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'

<!--state改变不会实时渲染-->
export default {
  data() {
   return {
   name:this.$store.state.name,
   };
  },
}

<!--监听state改变重新渲染视图-->
<template>
  <div>
    {{name}}
  </div>
<template>
export default {
  computed: {
   name() {
   return this.$store.state.name;
   }
  },
}

<!--取多个很冗余,繁琐-->
export default {
  computed: {
   token(){
   return this.$store.state.token;
   }，
   name(){
   return this.$store.state.name;
   }
  },
}

<!--mapState 直接取出-->
import { mapState } from 'vuex'
export default {
  computed: mapState([
   'token'，
   'name'
  ])
}

import { mapState } from 'vuex'
export default {
  computed:{
    getTime(){
      return 123;
    },
    ...mapState([
     'token'，
     'name'
    ])
  }
}

<template>
  <div>
    xiaokeai,dahuilang是我们取的别名
    token,name是state的值
    {{xiaokeai}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
      })
    }
  }
</script>

<template>
  <div>
    假如token的值123;
    balabala的值就是 123皮卡皮
    {{balabala}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
        // 为了能够使用 `this` 获取局部状态，使用一个自定义名字的函数
        balabala(state){
          return state.token + this.pikaqiu;
        }
      })
    }
  }
</script>

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,
  xiaoSon:state=>state.obj.yeye.baba.xiaoSon,
 })
    }
  }
</script>

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "老大",
   xiaoSon: "老二"
  }
  }
 }
 },
 getters: {
    <!--将想要提取或者处理的值这里处理好-->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})

export default store

<!--用的时候,和state一样，也可以别名等等操作-->
<template>
 <div>
    {{getson}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 mutations: {
 setToken(state, val) {
  state.token = val;
 }
 }
})

export default store

 methods: {
  ...mapMutations([
   'setToken'
  ])
 }
 
 <!--使用-->
 this.setToken(100); //token修改为100

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 },
 actions: {
  increment (context) {
   context.commit('increment')
  }
 }
})

<!--辅助函数操作 注入在methods中-->
import { mapActions } from 'vuex'

export default {
 methods: {
  ...mapActions([
    "increment"
  ])
 }
}

<!--使用-->
this.increment(123);

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 modules:{
 moduleA
 }
})

export default store;

<!--moduleA.js-->
export default {
 // namespaced: true,
 state: {
  cat:"我是cat",
 },
 mutations: { 
 setCat(state, val) {
  state.cat = val;
 } 
 },
 actions: { 
   
 },
 getters: { 
   
 }
};

this.$store.state.moduleA.cat
或者
...mapState({
 cat:state=>state.moduleA.cat,
}),

不可以(state是局部，不可以这么取)：
...mapState([
  "cat"
]),

和原来一样，因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
 "setCat"
])

<!--moduleA.js 文件-->
export default {
 namespaced: true,
 state: {
  cat:"我是cat",
 }
}

this.$store.state.moduleA.cat

或者
<!--注意这里：命名空间的名字带上，在modules注册时候呢个key值-->
<!--也可以别名，方法和之前一样，就是第一个参数是空间名-->
...mapState("moduleA",[
  "cat"
])

<!--只是第一个参数是空间名，其他操作一样-->
...mapMutations("moduleA",[
 "setCat"
])
this.setCat(888);

或者：

this.$store.commit("moduleA/setCat",666);

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 state: {},
 mutations: {},
 actions: {},
 getters: {},
 modules:{},
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

export default store