Vuex 在项目中使用

vuex是一个专门为vue构建的状态集管理，主要是为解决组件间状态共享的问题，强调的是集中式管理。 简单的来说就是vue中多个组件之间的传值问题，像简单的父子组件之间可以通过props来执行，或者通过事件触发实现。但是对于同级组件之间的传值，用这个方法就非常的麻烦，所以就需要一种能实现多个组件，不同关系之间的传值问题。

项目中使用：

1.安装：

（1）直接下载包引入

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

 （2）使用npm安装：

npm install vuex  --save

• 使用import方式引入Vuex ：

import Vuex from ‘vuex’

• 使用Vue的插件引入函数Vue.use()使用Vuex

Vue.use(Vuex);

2.安装之后new一个vuex实例对象

var store = new Vuex.Store({
    //  state表示 存放数据部分
    state:{
     // 这里就是data数据部分
    },
     // mutations是store对象的方法部分
    mutations:{
        modifyMsg (state,Obj){
            console.log("这个是方法部分") 
        }
    },
    // getters 相当于vue中的计算属性
    getters：{
        activeList(state){
            return state.list.filter(item=>ischecked === false)
        }
    }
    //  动作部分，主要是对mutation部分异步的处理
    actions:{
        fetchMsg (context){
            $.ajax({
                    url:'PHP/GetMsgs.php',
                    type:'GET',
                    data:{},
                    dataType:'json',

                    success:function(response){
                        if ( typeof response === 'string') {
                            response = JSON.parse(response);
                        }
                        console.log(response);
                        $(response).each(function(k,v){
                            // console.log(v.id+v.title+v.content);
                            context.commit('modifyMsg',v);
                        });
                    }
                });
        }
    }
});

 3.在Vue实例中注册store对象：

new Vue({
  el: '#app',
  router,
  store,  // 在vue中注册store
  method (){
    // 方法部分
  }
  created (){
    //  钩子函数
  }
})

4.vuex中state、mutations、getters、actions的使用;

state在vuex中保存数据，如果数据需要通过某些方法做处理就需要用到mutations方法或者getters计算属性，进行处理。

在vue实例中，

触发mutations方法：this.$store.commit触发方法，后面是传过去的参数

调用getters的方法：先在vue实例中引入mapGetters，再 通过...mapGeters(["activeList"])

如下就是具体的操作方法：

import{mapGetters} from "vuex";

var vmx = new Vuex.store({
    state:{
        list:[]  // 一个空数组
    },
    
    mutations:{
        add: (state,paylaod)=>{
            state.list.push(payload);  // 通过add方法把vue实例中传过来的参数payload 用push添加到list数组中
        }  
    }，
    
    getters：{
        activeList(state){
            return state.list.filter(item=>item.isChecked===false)
        }
    }

})


var vm = new Vue({
    el : "#app",
    data :{
        isShow:false
    }
    store,
    methods: {
        btn(ev){
            console.log(ev.target.value);  // 获取当前时间源的value值
            this.$store.commit("add",{text:ev.target.value,ischecked:false});  //通过this.$store.commit触发这个add方法，后面是传过去的参数
        }
    },
    
    computed:{
        ...mapGeters(["activeList"])
    }

})

注意：

（1）actions与mutations的区别：

        其中actions区别于mutations的地方在于mutations只能进行同步更改，而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性

        在函数执行方面，而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

（2）在组件中访问数据 state：

        在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后，组件会自动更新，则应该使用组件的computed属性定义数据，而不是通过data属性定义。如果使用data定义组件数据，则state中的数据发生更改之后组件不会发生变化。