<vuex第一弹>vuex之state和Mutation（前端网备份）

2019-06-10 13:54:41 阅读：224 来源： 互联网

标签：count jia state num Mutation vuex store bColor

state为访问状态对象
Mutation为触发状态各人理解，这里做的是一些全局改变样式这种类似的操作
通过vue入口文件main.js里面开始
main.js
import store from './store/index'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
写vuex的层
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutation'
Vue.use(Vuex);
export default new Vuex.Store({
    state,
    mutations
})

store/state.js

const state = {
    count : 44,
    bColor:"orange"
}
export default  state;

store/mutation.js

const mutations = {
    jian(state){
        state.count--
    },
    jia(state,n){
        state.count+=n.a
    },
    changeColor(state){
        if(state.bColor == "orange"){
            state.bColor = "blue"
        }else{
            state.bColor = "orange"
        }
    }
}
export default mutations

调用vuex的组件层

<template>
  <div class="wrapper">
    我是list1_son
    {{$store.state.count}}-{{count}}
     <button @click="$store.commit('jia',num)">+</button>  
     <!-- <button @click="jia(num)">+</button>  -->
     <button @click="changeColor(bColor)">改变背景颜色</button>
     <div :style="{background:bColor}" class="text_bc">123</div>
     <button @click="jia(num)">+</button> 
    <button @click="jian">-</button> 
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
        num:{a:2},
    };
  },
  watch: {},
  //几种写法形式
  //   computed:{
  //       count(){
  //           return this.$store.state.count - 1
  //       }
  //   },
//   computed: mapState({
//     count: state => state.count + this.num
//   }),
//mapState简写在computed里;mapMutations简写在methods里
 computed: {
     ...mapState({
        count: state => state.count + 2,
        bColor: state => state.bColor
    }),

 },
  methods: {
    //不简写的方法，直接在这里定义方法，在里面去传参
    //   jia(){
    //       let num = this.num;
    //       this.$store.commit('jia',num) 
    //   },
    //简写的方法必须在上面的@click="jia(num)"动态传参,目前只实现了这种形式
      ...mapMutations({
            jian: 'jian',
            jia:'jia',
            changeColor:'changeColor'
        }),
  },
  created() {
  },
  mounted() {
    console.log(this.$store.state.count);
  }
};
</script>
<style  scoped>
.wrapper {
  color: grey;
}
.text_bc{
    background: orange;
    width:100px;
    height:100px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center
}
</style>

标签：count,jia,state,num,Mutation,vuex,store,bColor
来源： https://www.cnblogs.com/lsc-boke/p/10997249.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

<vuex第一弹>vuex之state和Mutation（前端网备份）