vuex安装及最基本使用入门(严格模式下)

•  安装vuex

 

  npm install vuex --save

• main.js中引入安装

   

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

•  配置vuex（非严格模式下可直接操作state数据，只是无法跟踪数据状态变化）

   

 //Vuex配置
    const store = new Vuex.Store({
            // state类似vue实例中的data 用来存放数据
            state: {
                    // 可以设置一些需要全局使用的数据
                    username:'zxx'
            },
            // mutations类似vue实例中的methods
            mutations: {
                    // 用来处理数据 比喻数据删除更新等操作
                    // 第一个参数state是固定写法 第二个参数表示的是需要修改成的数据
                    update(state,name){
                            state.username = name;
                    }
            }
    })

• 组件中通过this.$store使用

           

console.log(this.$store.state.username);

•  调用mutations方法更新数据

       

    // 第一个参数是 mutations 中定义的对应的方法名 第二个参数是需要更新的数据
    // 具体更新逻辑在update方法中实现
   this.$store.commit('update','lxy');调用update方法更新用户名

• 组件内监视state中的数据更新

           

 import { mapState } from 'vuex';

// mapState可以将vuex实例state中定义的属性 映射成为当前组件中的计算属性
// 同时可以保证在计算属性的方法体中可以使用state中的属性
computed: mapState({
        username: state => state.username
       // username:function(state){return state.username};
})