vuex

vuex简介

vuex就是vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问

vuex安装

            
                 11.安装vuex
 2npm install vuex --save
 32.导入vuex包
 4import Vuex from ‘vuex‘
 5Vue.use(Vuex)
 63.创建store对象
 7export default new Vuex.store({
 8//state中存放的就是全局共享的数据
 9state:{
10count:0
11}
12})
134.将store对象挂载到vue实例中
14new Vue({
15  el: ‘#app‘,
16  render: h => h(App),
17  router,
18  // 将创建的共享数据对象，挂载到 Vue 实例中
19  // 所有的组件，就可以直接用 store 中获取全局的数据了
20  store
21})

        

核心属性

state

• 1.在index.js中定义数据

            
                1
                export default new Vuex.Store({
2  state: {
3    num: 10
4  },
5  mutations: {},
6  actions: {},
7  modules: {}
8})

        

• 2.新建组件demo1.vue，接收数据

            
                1
                <template>
                

                2  <div>
3    <h1>demo1</h1>
4    state的数据为:
5    <p>{{ $store.state.num }}</p>
6  </div>
7</template>

        

• 3.在Home.vue中引入组件，并进行注册

            
                1
                export default {
2  name: "Home",
3  components: {
4    HelloWorld,
5    demo1,
6  },
7};

        

computed

• 1.在demo1中添加计算属性

            
                1
                export default {
2  computed: {
3    num() {
4      return this.$store.state.num;
5    },
6  },
7};

        

• 2.页面引入

            
                1
                <template>
                

                2  <div>
3    <h1>demo1</h1>
4    <p>state的数据为:{{ $store.state.num }}</p>
5    <p>computed的数据为:{{ num }}</p>
6  </div>
7</template>

        

getters

• 在index.js中添加 getters方法

            
                1getters:{
2      //会有一个形参.这里边的形参就是state中的数据
3      vuxFun(state){
4        console.log(state);//输出一个对象,对象里为state中的所有数据
5        return state.num * 2;
6      }
7    },

        

• demo1页面调用方法

            
                1
                <template>
                

                2  <div>
3    <h1>demo1</h1>
4    <p>state的数据为:{{ $store.state.num }}</p>
5    <p>computed的数据为:{{ num }}</p>
6    <p>Getters的数据为:{{ $store.getters.vueFun }}</p>
7  </div>
8</template>

        

mutation

• 1.在store中的index.js中的文件中---的mutatitons中添加修改方法

            
                1  mutations: {
2    changenum(state, payload) {
3      // 通过组件传来的值进行修改操作
4      console.log("mutations中的方法的 payload的值为" + payload);
5      state.num += payload
6    }
7  },

        

2.在demo1中，添加按钮并触动点击方法

            
                 1
                <template>
                

                 2  <div class="hello">
 3    <h2>我是state中的num--:{{ num2 }}</h2>
 4    <br />
 5    <br />
 6    <!-- 点击组件按钮触发change方法 -->
 7    <button @click="change()">点击我调用vuex中的修改方法(+6)</button>
 8  </div>
 9</template>
10
11<script>
12export default {
13  computed: {
14    num2() {
15      console.log(this.$store.getters.vuxFun);
16      return this.$store.getters.vuxFun;
17    },
18  },
19
20  methods: {
21    //   通过methods中的方法调用vuex中的changenum方法
22    change() {
23      //  this.$store.commit(‘vuex中的修改方法名‘,‘要参与修改的值‘)
24      this.$store.commit("changenum", 6);
25    },
26  },
27};
28</script>  

        

actions

• index.js中添加异步方法

            
                1actions: {
2    AsyncAddNum(context, payload) {
3      console.log(payload);
4      setTimeout(() => {
5        context.commit(‘addNum‘, payload)
6      }, 1000)
7    }
8  }

        

• demo1.vue调用方法

            
                1 methods: {
2    btnClick() {
3      this.$store.dispatch("AsyncAddNum", 2);
4    },
5  },