Vuex的安装和使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 官网 (opens new window)

Vuex的安装

npm install vuex –-save

Vuex的简单使用

1. src文件下新建一个store文件夹，再在store文件夹下再建一个store.js文件。

2. 在store.js文件中写入一下内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { //声明状态 相当于data
    count: 45
  },
  getters: { //声明getter 相当于计算属性computed
    addCount() {
      return state.count += 5
    }
  },
  mutations: { //声明mutations 相当于method
    add(state) {
      state.count++
    },
    sub(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit('add')
    }
  }
})

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

3. 在main.js程序入口文件引入store.js

4. 在各个组件中使用store

<!--  -->
<template>
                    <!-- 在组件中使用     -->
  <div>
    <!-- 使用state -->
    state : {{$store.state.count}}<br>
    <!-- 使用getter -->
    getter : {{$store.getters.addCount}}<br>
    <!-- 使用mutation -->
    mutation : <button @click="$store.commit('add')">加</button>
    <button @click="$store.commit('sub')">减</button> <br>

    actions ： <button @click="$store.dispatch('increment')">actions</button>
  </div>
</template>

<script>
                    //在js中使用
  export default {
    data() {
      return {};
    },
    components: {},

    computed: {},
    mounted() {
        this.$store.dispatch('increment');
        this.$store.commit('add');
        console.log(this.$store.state.count);
        console.log(this.$store.getters.addCount);
    },
    methods: {}
  }

</script>

模块封装

将各个模块的state、mutations、getters、actions各自进行封装，然后在store.js文件中引入模块。

目录结构：

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import message_stroe from "./message_store";
import photoFrame_stroe from "./photoFrame_store";

Vue.use(Vuex)

export default new vuex.Store({
  modules: {
    message: message_stroe,
    photoFrame: photoFrame_stroe
  }

//message_store.js

export default {
  state: {
    username: "",
    openid: "",
    unionid: "",
    phone: "",
    sex: "1",
    Address: "",
  },
  mutations: {
    changeAttr(state, { attr, val }) {
      state[attr] = val;
    }
  },
  actions: {
    changeMessage(context, { attr, val }) {
      context.commit("changeAttr", { attr, val });
    }
  },

};

辅助函数

mapState 辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
//如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

将vuex存储到localstorage

vuex-persistedstate

npm i vuex-persistedstate --save

然后在store中引用

import Vue from "vue";
import vuex from "vuex";
import createPersistedState from 'vuex-persistedstate'//引入vuex-persistedstate
Vue.use(vuex);

import message_stroe from "./message_store";
import photoFrame_stroe from "./photoFrame_store";
export default new vuex.Store({
  
  modules: {
    message: message_stroe,
    photoFrame: photoFrame_stroe
  },
  plugins: [createPersistedState({   //使用
    storage:window.sessionStorage  //sessionStorage或者localStorage
  })]
});