转载

vuex “状态管理模式“


vuex 的学习之路,理解与运用。主要步骤如下:

1、vuex的npm安装命令:

npm install vuex --save

2、新建store文件夹,store下新建index.js 如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    getChangeState: function (state) {
      return state.count + 1;
    }
  },
  mutations: {
    addCount (state, n) {
      return state.count = state.count + n;
    }
  },
  actions: {
    addCountFun (context, n) {
      context.commit("addCount", n);
    }
  }
})

3、main.js中引入store -> index.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入
import './plugin/element.js'
import animated from 'animate.css' // npm install animate.css --save安装,在引入
Vue.use(animated)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4、页面中运用如下 :

<template>
  <div class="about" style="background:yellowgreen">
    <h2>我是从页面直接获取state对象的属性count --- {
  {this.$store.state.count}}</h2>
    <h2>页面直接getters 方法getChangeState 获取count --- {
  {this.$store.getters.getChangeState}}</h2>
    <h2>要改变store中的变量的状态,唯一的途径只有mutations 取调取store.js中mutations的addCount的方法</h2>
    <button @click="add(1)">count加一</button>
    <h2>要改变store中的变量的状态,唯一的途径只有mutations 取调取store.js中mutations的addCount的方法</h2>
    <button @click="add(10)">count加10</button>
    <h2>Action提交的是Mutation context.commit去调用mutations方法addCount</h2>
    <button @click="add2">count加10</button>
    <h2>我是通过mapstate获取count值----{
  {number}}</h2>
    <h2>我是通过mapGetters 调取getChangeState方法 获取count值----{
  {number2}}</h2>
    <button @click="add3(10)">mapMutations count加10</button>
    <h2>mapActions 为count添加值</h2>
    <button @click="add4">我是mapActions增加</button>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'//按需引入
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState({
      number: state => state.count
      //这里是个es6语法,等同于下面的写法
      // number: function (state) {
      //   console.log(state, '9-9-')
      //   return state.count;
      // }
    }),
    ...mapGetters({
      number2: 'getChangeState' //这个方法是store index.js中getChangeState方法
    })
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 整理思路:
    // 方法1:我们可以通过this.$store.commit("addCount");更改state中值。
    // 方法2:通过this.$store.dispatch("addCountFun")去调用actions里面的方法,再次用context.commit("addCount")取调用,改变state中值。
    add (n) {
      this.$store.commit('addCount', n);
    },
    add2 () {
      this.$store.dispatch("addCountFun", 10)
    },
    // mapMutations又等同于在点击事件中,调取store方法
    ...mapMutations({
      add3: "addCount"
    }),
    // mapActions又等同于this.$store.dispatch("addCountFun"),先去调用store中的actions中的addCountFun方法,再用context.commit去mutations调取addCount方法。
    //@1不传参方法 ...mapActions({
    //   add4: "addCountFun"
    // }),//
    //@2传参方法一 以下为mapActions传参 单独定义 addCountFun方法调用传参
    ...mapActions(["addCountFun"]),
    add4 () {
      this.addCountFun(10)
    }
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created () { },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { } //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>

参考文章:

https://segmentfault.com/a/1190000022073199

  • 转载自:https://blog.csdn.net/limengdi1314/article/details/120763325
  • 留言