vue状态管理（vuex）

Posted 2022-09-12 piaoyu

vuex，官方定义为状态管理，其实这个状态管理，和H5本地缓存的作用很相似，通俗的讲，就是存储一些公用的东西，提供给各个组件使用，和服务器端的session功能也很类似。

不同的是，vuex在刷新页面的时候，会自动还原到初始的状态，话不多说，我们直接上干货：

1.安装vuex:npm install vuex --save

2.需要在man.js中引用如下代码

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import vuex from ‘vuex‘
Vue.config.productionTip = false
Vue.use(vuex)

new Vue(
  el: ‘#app‘,
  router,
  components:  App ,
  template: ‘<App/>‘
)

 

3.在根目录下新建vuex文件加，新建文件store.js,在js文件中，写如下代码：

import vue from ‘vue‘
import Vuex from ‘vuex‘
vue.use(Vuex)
const state=
    count:1


const mutations=
    add(state)
        state.count++;
    ,
    reduce(state)
        state.count--;
    


export default new Vuex.Store(
    state,mutations
)

说明：count:1是一个状态管理的属性，这里你可以设置自己的属性，例如：loginstate:object

const mutations是一个固定的写法，这里的作用是修改state中的属性，如count，里面的方法可以自己的定义.
若要传参的话，只能传递一个参数，如：

 add(state)
        state.count++;
    方法，如果要传递参数，只能传递一个参数写成：

 add(state，parameters)
       ....
    

4.前端调用：

4.1在页面引用vuex,

import store from "@/vuex/store";

在选项中申明一下store

代码如下：

export default 
  name: "HelloWorld",
  data() 
    return 
      msg: "Welcome to Your Vue.js App"
    ;
  ,
  store,
  computed: 
  
  ,
  methods: 
   
  

4.2在页面中使用store,

方式一：

$store.state.count

方式二：

如觉得方式一的写法不太好看，比较长，可以在computed中做如下操作：

 computed: 
    computedcount() 
      return this.$store.state.computedcount;
    

这样就可以在页面中直接调用computedcount

方式三：

也可以引用vuex里的

mapState

引用方式如下：

import  mapState from "vuex";

然后可以在computed中做如下操作：

 ...mapState(
      mapcount: state => state.mapcount
    ),
    ...mapState(["mapcount"]),

这两种写法都可以，页面使用的时候，直接mapcount

5.修改状态

修改状态，需要使用commit，以上代码中已经写好了添加和减少的方法，可以有两种方式进行操作：

方式一：

<button @click="$store.commit(‘add‘)">相加</button>

<button @click="$store.commit(‘reduce‘)">相减</button>

方式二：

<button @click="add()">Mutaions传参相减</button>

方式二需要引用mapMutations,应用方式如下：

import mapMutations from "vuex";

然后在选项：

methods中写如下代码：

...mapMutations([

“add”

])

以上就是vuex的基本使用了，剩下还有一些选项，如果弄清楚了以上这些，剩下的也不是什么问题了